よく使うAPI

使い方は以下の記事が分かりやすかったです。

Firebase Cloud Firestoreの使い方 - Qiita

CollectionReference

CollectionReference | JavaScript SDK | Firebase

const collectionRef: firebase.firestore.CollectionReference = firebase.firestore().collection("cities");

よく使うメソッド

get(): QuerySnapshotを返す
doc(): 指定されたパスのDocumentReferenceを取得
where(): 条件を絞り込み
onSnapshot(observer: object): コレクションに変更があった場合にobserverを実行。

DocumentReference

DocumentReference | JavaScript SDK | Firebase

const docRef: firebase.firestore.DocumentReference = firebase.firestore().collection("cities").doc("SF");

よく使うメソッド

get(): ドキュメントを取得
set(): ドキュメントを新規作成
update(): ドキュメントを更新
collection(): 指定されたパスのCollectionReferenceを取得

collection -> doc -> collection -> doc ... と参照することができます。

QuerySnapshot

QuerySnapshot | JavaScript SDK | Firebase

QuerySnapshotには、クエリの結果を表す0個以上のDocumentSnapshotオブジェクトが含まれます。ドキュメントは、docsプロパティを介して配列としてアクセスするか、forEachメソッドを使用して列挙できます。ドキュメントの数は、空およびサイズのプロパティを介して決定できます。

// 全ドキュメントのスナップショット
const querySnapshot = await collectionRef.get();
// populationが100より小さい全ドキュメントのスナップショット
const querySnapshot = await collectionRef.where("population", "<", 100).get();

よく使うメソッド

forEach(): QuerySnapshot内のすべてのドキュメントを列挙。

DocumentSnapshot

DocumentSnapshot | JavaScript SDK | Firebase

DocumentSnapshotには、Firestoreデータベース内のドキュメントから読み取られたデータが含まれます。.data（）または.get（）を使用してデータを抽出し、特定のフィールドを取得できます。

data(): フィールドを取得。

初期化前に実行するとエラー

Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

Vueの場合、main.tsで初期化される前にコンポーネントファイル内でDBにアクセスしようとすると怒られます。

import firebase from 'firebase';
const db = firebase.firestore(); 

export default Vue.extend({
...
});

QuerySnapshot forEach

DataSnapshot forEach

JavaScriptオブジェクトの動作方法により、によって返されるJavaScriptオブジェクト内のデータval()の順序は、サーバー上の順序やchild_addedイベントの順序と一致するとは限りません。それは forEach()便利です。これにより、DataSnapshot クエリの順序でaの子が反復されることが保証されます。

Array.prototype.forEach()ではないので注意。

docsで配列にアクセスしてArray.prototype.forEach()を使うことも可能。

// QuerySnapshot forEachを使った場合
querySnapshot.forEach((doc) => {
  console.log(doc.data());
});
// Array.prototype.forEach()を使った場合
querySnapshot.docs.forEach((doc) => {
  console.log(doc.data());
});

基本的にはDataSnapshot forEachを使うべきです。

The query requires an index...

consoleにThe query requires an indexというエラーがでた場合はコンソールのリンクをクリックすれば自動でインデックスを生成してくれます。自分で生成するよりキー名のミスなどが発生しないので間違いないでしょう。

設計関連

Cloud Firestoreの勘所パート2 — データ設計 - google-cloud-jp - Medium

Firebase入門フリマアプリを作りながら、認証・Firestore・Cloud Functionsの使い方を学ぼう！ - エンジニアHub｜若手Webエンジニアのキャリアを考える！