如何為我的 next.js 項目導出 firebase firestore

Question

我無法理解如何導出 firebase 的 firestore 以在我的 next.js 應用程序的客戶端上使用。 我有以下從我的應用程序實例化 firebase 的方法。

import firebase from 'firebase/app'
import 'firebase/auth' // If you need it
import 'firebase/firestore' // If you need it
import 'firebase/storage' // If you need it
import 'firebase/analytics' // If you need it

const clientCredentials = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
}

// Check that `window` is in scope for the analytics module!
if (typeof window !== 'undefined' && !firebase.apps.length) {
  firebase.initializeApp(clientCredentials)
  // To enable analytics. https://firebase.google.com/docs/analytics/get-started
  if ('measurementId' in clientCredentials) firebase.analytics()
}

export default firebase

我的問題是我認為我可以在上面的代碼塊中實例化 firestore 並通過導入該實例化對象將其導出以在我的應用程序中使用：

export const db = firebase.firestore();

但是當我嘗試在其他文件中使用它時，我收到此錯誤：

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

但是我已經在if (window ...)塊內實例化了。 我不確定我做錯了什么，我可以推斷 if 塊中的實例化是在 export const db... 運行之后發生的，那么我該如何等待呢？

TIA

Answer 1

嘗試這個。

import app from "firebase/app";
import "firebase/auth";


const config = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};


class Firebase {
    constructor() {
        app.initializeApp(config);
        this.auth = app.auth();
      
        this.fs = app.firestore(); // example of setting firestore equal to this.fs for later access
    }
}

export default Firebase;

關鍵部分是import app from "firebase/app"; 和構造函數的內容。

嘗試一下，看看它是否有效。 我的應用程序在 React 中使用了一些上下文 API，但它是這樣啟動的。 如果沒有留下評論你得到什么錯誤，我會試着停下來看看你在做什么