はじめに

こんにちわ！こんばんわ！ご観覧ありがとうございます。
定期的に雑色な記事を投稿します。(タイトルは記事のメインの内容にしてますが)
基本的には抱えている問題を改善し、改善方法を記事にしてアップしようと考えています。

お題と経緯

Firebaseを使用した案件に携わってますが、ちょうどv8しかなく、初めてすぐにv9がリリースされました。
いつかいつかv9に移行せねばということで、今回重い腰を上げた次第です。
参考になる記事があまりなかったので、メモ程度に記事にします！

今回の内容

とりあえず、Queryからまとめます。
Firestoreからデータを取得する際につかうcollectionとdocのv8→v9の書き方の違いについてです。

初期設定

import firebase from 'firebase/app';
import 'firebase/firestore';

const config = {
  ...YOUR_CONFIG
};

firebase.initializeApp(config);
const db = firebase.firestore();

v9 モジュールベースの初期化ですね。

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const config = {
  ...YOUR_CONFIG
};

const app = initializeApp(config);
const db = getFirestore(app);

Firestoreクエリと実行（collection）

const query = db.collection('users').where('age', '>=', 18);
query.get().then((querySnapshot) => {
  querySnapshot.forEach((doc) => {
    console.log(doc.id, ' => ', doc.data());
  });
});

v9 whereなどimportがいります。

import { collection, query, where } from 'firebase/firestore';
import { getDocs } from 'firebase/firestore';

const q = query(collection(db, 'users'), where('age', '>=', 18));
getDocs(q).then((querySnapshot) => {
  querySnapshot.forEach((doc) => {
    console.log(doc.id, ' => ', doc.data());
  });
});

query側をgetDocsの引数にしてますね。

Firestoreクエリと実行(doc)

const docRef = db.collection('users').doc('user_id');
docRef.get().then((doc) => {
  if (doc.exists) {
    console.log('Document data:', doc.data());
  } else {
    console.log('No such document!');
  }
});

v9 getDocなので注意！collectionはgetDocsです。

import { getDoc, doc } from 'firebase/firestore';

const userDocRef = doc(db, 'users', 'user_id');
const docSnap = await getDoc(userDocRef);

if (docSnap.exists()) {
  console.log('Document data:', docSnap.data());
} else {
  console.log('No such document!');
}

補足ですが、自分の開発環境だとなぜかdocの第一引数の型が合いませんでした。

    function doc(firestore: types.FirebaseFirestore, path: string, ...pathSegments: string[]): DocumentReference<DocumentData>;
    function doc<T>(reference: types.CollectionReference<T>, path?: string, ...pathSegments: string[]): DocumentReference<T>;
    function doc(reference: types.DocumentReference<unknown>, path: string, ...pathSegments: string[]): DocumentReference<DocumentData>;

docの受け取れる型で、一番上が該当するはずなのになんでやんねん！と思ってたら、vscode再起動で治ってました。
どっちにしろなんでやねん！
だいぶ困惑してましたね、でもよかった。