解決「vue3+Firestore Web画面初期表示で接続エラー」

1.はじめに

Vue3でWeb画面を作成しFirestoreに接続したとき原因不明のエラーで困ったことと、そのときの対処方法を紹介します。

2.準備は万端

Vue3でFirestoreに接続したいとき、ネットで検索し

1. プロジェクトを作成

2. FirebaseSDKをインストール

3. Firebase接続設定情報を登録

4. Firebase接続処理の実装

5. VueコンポーネントからFirestoreに接続し、データを取得する処理を実装

6. UIの実装

7. 最後に実行

と、していきますよね。

3.エラー発生

実行時にエラーが発生した場合、どこが間違えているか確認しつつ、エラーを取り除いていきます。が、以下のエラーが発生し、原因不明で解決できませんでした。

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

「initializeAppを最初に呼びなさい」と怒られているようです。

エラー内容からいろいろ調べてみたのですが、インストールも万全、接続設定もあっている、実装も問題なさそう、そもそもinitializeAppを最初に呼び出しているはず、なのにエラーが消えないという状況に陥りました。

4.対処方法

結論からいうと、画面初期表示時に、以下の実装をしていたのが問題だったのです。

await useFirestore().getUsers()

これを

onMounted(async () => {
 await useFirestore().getUsers()
})

とすると解決しました。

そう、画面初期表示時はonMountedの中で呼び出さないとエラーになるのです。

ネットで検索しても見つけられなかった対処法なので記事にしました。

同じ問題で困ったいる方への参考になれば幸いです。