Firebase JS SDK v9でのFirestoreの記述方法変更

前回のFirebase JS SDK v9の投稿が初投稿にしては200viewくらいあってうれしかったので、またv9関連で投稿します。

Firestoreの記述変更方針

前回の投稿「Firebase JS SDK v9 になってimportの記述が変わってた」でも書きましたが、Firebaseはv9になってimport方法を変更しています。
私はプログラミング初学者でよくわかりませんが、Composition API方式での記述らしいです。（今まではOption API方式？）

例えば、

v8_10_0.js

import firebase from "firebase/app"

const db = firebase.firestore();

と記述していたのが、

v9_0_0.js

import { getFirestore } from "firebase/firestore"

new getFirestore();

となります。
こうするとFirebaseのライブラリを毎回全部読み込むのではなく特定のモジュールのみを読み込めるので、高速化できるというのがv9のウリらしいです(?)。
もしv8以前の読込方式のままが良い場合は、前回の投稿にcompatライブラリについて書いていますのでそちらをご覧ください。

Firestoreインスタンスの宣言

getFirestore() は戻り値が既存のFirestoreインスタンス。
既存のFirestoreインスタンスが存在しない場合は、新しいインスタンスを生成します。
参考: Firebase document

個人的な感想なので間違っているかもしれませんが、
これまではdb = firebase.firestore()とインスタンスの宣言をしたファイルをimportするか、各ファイルでfirebaseモジュール全体をimportしてfirebase.firestore()...としていたようです。
Vue.jsのようなフレームワークを使用していると各コンポーネント毎にfirebaseモジュール全体をimportしていて、ひょっとして1つのページを表示するのに10回くらい同じモジュールをimportしてるんじゃないかと不安になってました。
これがgetFirestore()だけで既存のFirestoreインスタンスをどこからでも取ってこれるようになり、個人的にはすっきりしました。

このgetFirestore()を他の関数の引数に加えるように、各関数が修正がされているようです。
以下、公式チュートリアルにある例を紹介しておきます。

doc() ドキュメント内のリファレンス参照

v8_10_0.js

import firebase from "firebase/app";
docRef = firebase.firestore().collection("cities").doc("SF");

v9_0_0.js

import { getFirestore, doc } from "firebase/firestore";
docRef = doc( getFirestore(), "cities", "SF");

これだけでいいみたいです。

v9_0_0.js

import { getFirestore, collection, doc } from "firebase/firestore";
docRef = doc( collection( getFirestore(), "cities"), "SF");

この書き方もアリみたいです。引数が1つ減るのでなんだか違和感ありますね。

###getDoc(): DocumentSnapshot; 単一ドキュメントの内容を取得
v8以前はget()で取得していたものが、getDoc()に代わりました。

v8_10_0.js

import firebase from "firebase/app";
firebase.firestore().collection("cities").doc("SF").get().then((doc) => {
    if (doc.exists) {
    //...
    } else {
    //...
    }
}).catch((error) => {
//...
});

v9_0_0.js

import { getFirestore, doc, getDoc } from "firebase/firestore";
async function firestore_getDoc() {
  docSnap = await getDoc(doc(getFirestore(), "cities". "SF"))
  if (docSnap.exists()) {
    //...
  } else {
    //...
  }
}
firestore_getDoc();

async, await等の非同期処理がいまいち理解できてないので間違っているかもしれませんが、こんな感じです。
then()で処理してはいけないのは何でだろう…？

あとがき

v8以前の形式で書かれている他のQiita等を見ながら、自分でリファレンスを見てv9に対応させているので恐らくこの投稿にも間違いがあります。
ただ、私と同じようにv8とv9の記述形式の違いで頭ごちゃごちゃになった人が解決できる取っ掛かりになればと思い投稿していますので、もしミスがありましたらぜひご教授ください。