@dropout26posted at 2021-09-22

Firestoreでdoc.id, "=>", doc.data() がなぜundefinedを回避できるのか分からない

Q&A

Closed

解決したいこと

Firestoreでクエリを用いて複数のドキュメントを取得する際に、ドキュメントIDを一緒に取得したいのですが方法がわかりません。
正確には、Firebaseの公式ドキュメントにあるconsole.log(doc.id, "=>", doc.data())が何をしているのかを教えていただけると助かります。

該当するソースコード

公式ドキュメントを一部変更して、

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

var map = new Map();
const q = query(collection(db, "cities"), where("capital", "==", true));

const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  map.push(doc.id, " => ", doc.data());
});

のように、クエリの結果を順にMapに格納する際に、

map = [{
  documentID1: { 
    //fields...
  },
  documentID2: {
    //fields...
  }
}];

のようにしたいです。
上記のコードだと、documentIDが連番になっています。

自分で試したこと

map.set(doc.id, doc.data());

分かってはいるんですが、これだとdoc.data()はundefinedになります。
アロー関数やFirebaseの公式ドキュメント等、色々しらべてみたのですが、このdoc.id, "=>", doc.data()`が何かが分からず困っています。

1Answer

@dropout26 posted at 2021-09-22

すみません、すごく勘違いをしていました。
//doc.data() is never underfined for query doc snapshots
の事を何かよく分からない風に誤解していて、投稿してから気づきました。
forEach内でdoc.data()は普通に呼び出せました。
console.log内の"=>"をアロー関数か何かかと勘違いしたのが始まりでしたが、ただの矢印の意味でした。
恥ずかしい限りなので、質問はクローズしておきます。

参考までに私が勘違いした理由を書いておくと、
Vue.jsのdataプロパティ内にある変数に対してFirestoreの検索結果をforEach内で順に追加していく事を行っていましたが、
Mapインスタンスの宣言が行われておらず、そのためmap.setが行えずmap.pushでないとダメだったので何故だろうと思いながら、

map.push({doc.id, doc.data()});

としていてエラーが発生し、原因を今回の質問の箇所だと思い込んでいました。

連番うんぬんのくだりは、console.log(map)とした際に呼び出されるのは配列ではなく配列のProxyオブジェクトであり、これはdataプロパティの性質によるものだそうです。
配列のProxyオブジェクトは配列のインデックスをキーとするオブジェクトなので、console.logで見えたものが連番のキーを持っていた、という話でした。

ついでに書いておくと、
console.logは引数を複数取ることができ、文字列の結合をしなくても引数の順番にコンソール出力するというだけの話でした。
なのでconsole.log(doc.id, "=>", doc.data())の第2引数はただの矢印という事です。

お騒がせしました。

1Like

Are you sure you want to delete the question?