FireStoreでQuerySnapShotからデータを取り出す時はforEachよりdocsの方が便利

Firestoreでcollectionを複数取ってくる場合、大体以下のような書き方をします。

db.collections('hoge').get().then(querySnapshot => {
  querySnapshot.forEach(docs => {
     //それぞれのレコードに対する処理
  });
});

公式ドキュメントでもこの方式です。
この方式、上記の//それぞれのレコードに対する処理の部分が、「単にそれぞれの要素に対して何らかの処理をしたいだけ」という場合だったらforEachでいいと思うのですが、普通そんなことはないと思います。
基本的にDBアクセス部分とロジック部分は切り離したいので、このforEachの中に書かれるのは予め作っておいた配列にデータを詰めるとか、ビジネスロジック側で使いやすいようにdocをちょっと整形・変換するとかその程度のはずです。

要するに、forEachではなくて、mapとかその辺りを使いたい。
しかし、残念ながらquerySnapshotにはforEachしかありませ。

ここで登場するdocs

とはいえ実はいい感じの逃げ道がありまして、querySnapshotにはdocsというプロパティがあります。
これを使うとなんとQueryDocumentSnapshotの配列が取れます。

ひとたび配列にしてしまえばいくらでも加工できるので、かなりやりやすくなります。

db.collections('hoge').get().then(querySnapShot => {
  const datas = querySnapShot.docs.map(doc => {
      //変換処理
  });
})

まとめて抱えるリスクは？

DBからデータを1つずつ取ってきて逐次処理する方式と、はじめに全て取得する方式を比較すると、一般的には大量データの場合後者は危険です。
一度全て読み込む都合上、瞬間的にメモリを大量に使用して食いつぶしてしまう可能性があるからです。
が、フロントエンドからfirestoreを使う場合に限って言えば、普通に設計していればそんなに大量のデータを読み込むことはないはず(メモリを食いつぶすようなデータを取ってきて画面に表示しても人が認識できる範囲を超えてしまうので無意味)なので、あまり心配はいらないはずです。

まとめ

• firestoreから複数データを取り出す場合はdocsがおすすめ。