javascript - 如何将来自不同组件的 firebase auth 和 Cloud Firestore 作为单个 firebase 应用程序使用

Question

我正在尝试在我的 React 项目中使用 firebase 来提供身份验证和数据库功能。

在我的 App.js我有

import app from "firebase/app";
import "firebase/auth";
app.initializeApp(firebaseConfig);

在我的其他组件中称为 <Component />由 App.js 呈现我有这个来初始化数据库

import app from "firebase/app";
import "firebase/firestore";
const db = app.firestore();

但是这次我得到了这个错误

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

所以我试着把app.initializeApp(firebaseConfig);也在这个组件中，但我再次收到一个新错误，告诉我我实例化了两次。

Uncaught FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).

所以我想到的一个解决方法是在 App.js 处创建一个上下文在 app.initializeApp(firebaseConfig); 之后我通过 const db = app.firestore(); 创建了数据库并将值传递给上下文并让 <Component />消费。但是我不知道这是否是一个好的解决方案。

我的问题不同于How to check if a Firebase App is already initialized on Android出于一个原因。我没有尝试连接到第二个 Firebase 应用程序，因为它是针对那个问题的。我的整个项目只有一个Firebase App，提供两种服务:auth和database。

我尝试了该问题的解决方案以在 <Component /> 中使用

if (!app.apps.length) {
  app.initializeApp(firebaseConfig);
}

const db = app.firestore();

但它没有用，它仍然给我 Uncaught FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).错误

Answer 1

您在应用程序和组件中使用不同的 Firebase 实例。

// firebaseApp.js
import firebase from 'firebase'
const config = {
    apiKey: "...",
    authDomain: "...",
    databaseURL: "....",
    projectId: "...",
    messagingSenderId: "..."
};
firebase.initializeApp(config);
export default firebase;

然后您可以从 firebaseApp.js 导入 firebase 并使用它。更多详情 here