Firestore v9のデータ（コレクション）をmap()で返して関数化する方法

firestoreからコレクションを取得する際、forEach()のループ内でデータにアクセスする方法はありますが、map()で関数に分けで返す方法の解説記事があまりなかったので今回はそれを紹介します。

firebase v8ではなくv9の書き方で解説しています。

firestoreのコレクションをmap()で返す方法
firestoreのドキュメントを返す関数を作る方法
まとめ

firestoreのコレクションをmap()で返す方法

以下のように書けばokです。

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

const getCollection = async () => {
  const db = getFirestore();
  const querySnapshot = await getDocs(collection(db, 'コレクション名'));
  return querySnapshot.docs.map((doc) => doc.data());
};

const result = await getCollection();

firebaseから取得したコレクションをmap()で返す場合はquerySnapshot.docs.map()のように.docsという部分を入れるのがポイントです。

forEach()を使う場合はquerySnapshot.forEach()というように書くのでここがmap()と違う部分です。ただ注意点はここだけですね。

あとはmap()内でdoc.data()をreturnすればokです。

コレクション名の部分を引数として渡せるようにすれば、この関数1つで様々なコレクションを取得することもできますね。

ちなみにサブコレクションまでは取得できないので注意しましょう。

firestoreのドキュメントを返す関数を作る方法

一応ドキュメント（＝特定のコレクション内のデータのうちの1つ）をreturnする関数を作る方法も書いておきます。

以下のように書けばokです。

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

const getDocument = async () => {
  const db = getFirestore();
  const docSnap = await getDoc(doc(db, 'コレクション名', ドキュメントid));
  return docSnap.data();
};

const result = await getDocument();

ドキュメントは1つのデータなので普通にgetDoc()で取得してdata()を返せばokです。

ドキュメントにはそれぞれユニークidが振られているので、idを渡せばそのデータが取得できます。