Firestoreでdocumentのdataとidを両方一緒に取り出す

こんにちは！ @shoohです！
Firebaseを用いたアプリを開発する上でいろんな知見が得られたので紹介していきます。

Firestoreのデータベースからdocumentを取得する際、documentの内容とidの両方をいっぺんに取得できないか試行錯誤したので、それについてまとめてみました。

documentのidとは？

結論

useEffect(() => {
    db.collection("booksData").onSnapshot((snapshot) => {
      setBooks(
        snapshot.docs.map((doc) => ({
          docId: doc.id,
          docData: doc.data(),
        }))
      );
    });
  }, []);

// 保存
const [books, setBooks] = useState([]);

onSnapshotでコレクションを取り出した後、ドキュメントのid及びデータをそれぞれdoc.id、doc.dataとして取得しています。

僕の場合はReactを用いたので、取り出したものをuseStateの変数にそのまま保存しています。

まとめ

公式ドキュメントにも取得方法が書かれていますが、その方法だとうまく動かなかったので記事として残しておきます。