Cloud Firestoreで取得したデータを単純な配列データに変換する方法

Firestoreで取得（get）したデータはスナップショットの配列となっていて、そのままではVue.jsなどを使って画面に出力するのに適していないので、単純な配列データに変換する時の方法です。

Firestoreでデータを取得するのは、以下のようにします。

const db = firebase.firestore();
const scoresRef = db.collection('scores');

scoresRef.get()
  .then(function(snapshot){
    snapshot.forEach(function(doc) {
      console.log(doc.id);
      console.log(doc.data());
    }
  }).catch(function(error) {
    console.error(error);
  });

取得したデータにアクセスするためには、各ドキュメントのdata()にアクセスしないといけません。

上記で取得したデータをforEach()内で一つ一つ変換する方法は以下の通り。

var scores = [];
snapshot.forEach(function(doc) {
  scores.push(
    {
      id = doc.id,
      name = doc.data().name,
      score = doc.data().score
    }
  );
}

map()を使って以下のように一気に変換する方法もあります。

var scores = snapshot.docs.map(function(doc) {
  return doc.data();
});

上記の場合、data()で取得できるデータのみが対象でドキュメントのIDが含まれていません。

IDも必要は場合は、以下のようにします。

var scores = snapshot.docs.map(function(doc) {
  return Object.assign(doc.data(), {id: doc.id});
});

• Cloud Firestore でデータを取得する | Firebase
• Firebase - Firestoreでデータの配列を取得したい（firebase）｜teratail
• firestoreを使うときに理解しておきたいいろんなクラスを整理する - Qiita