やりたいこと
VueからFirebase(Cloud Firestore)に接続しデータを取り出す、という単純な仕組みを実装しようとしました。
しかし、技術ブログのサンプルコードや公式ドキュメントのコードを使ったところ、行き詰まりました。
解決のポイント
先に解決のポイントを書いておくと、主に次の通りです。
- Firebase v9 に従ったコードにする
- await をasync内に書く
- Firebaseコンソールにて、ルールを変更
公式ドキュメントのコード
Firestore公式ドキュメントのコードはこちらです。
最近Firebaseをインストールした方は、SDKのバージョンが9（v9）以上のはずです。v8以前とは書き方が若干違うようです。
技術ブログで紹介されているコードの多くは、v8に準拠したものに思われます。
基本的には公式ドキュメントのコードを参考にしましょう。
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
// ...
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize Cloud Firestore and get a reference to the service
const db = getFirestore(app);
import { collection, getDocs } from "firebase/firestore";
const querySnapshot = await getDocs(collection(db, "users"));
querySnapshot.forEach((doc) => {
console.log(`${doc.id} => ${doc.data()}`);
});
変更した箇所
公式の通りに書いてもエラーが出ます。なので、何箇所か修正します。
main.js
import { createApp } from 'vue'
import App from './App.vue'
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
// 省略
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
export default db; //追加
createApp(App).mount('#app')
設定ファイルの書き方です。
export default db を追加しています。
DBから読み込むコンポーネントを、仮にShowSample.vue とします（下のコードでは .js に変えています）。
そこには次の様なコードを書きます。
ShowSample.js
import db from "../main.js" //追加
import { collection, getDocs } from 'firebase/firestore'
設定ファイルでexport した dbをimportします。
methods に、次の functionを作ります。
ShowSample.js
getData: async function() { // async 追加
const querySnapshot = await getDocs(collection(db, "users"));
querySnapshot.forEach((doc) => {
console.log(`${doc.id} => ${doc.data()}`);
});
}
公式ドキュメントでは awaitだけですが、それではこんなエラーが出ます。
Unexpected reserved word 'await'
対応策として、async を使い、その内部にawait を入れる形にします。
ここまで変えても、つぎのエラーがでます。
FirebaseError: Missing or insufficient permissions
ここで、Firebaseコンソール→Firestore Database の「ルール」へ行き、アクセス設定をテストモードに変更します。
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if true;
}
}
}
本番環境へ移る時には、設定変更が必要です。
ひとまず、テスト環境ではFirestoreから読み込むことができました。