时间戳

首页 > 解决方案 > 如何将不同组件中的 firebase auth 和 Cloud Firestore 用作单个 Firebase 应用程序

javascript - 如何将不同组件中的 firebase auth 和 Cloud Firestore 用作单个 Firebase 应用程序

问题描述

我正在尝试在我的 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).错误

标签： javascriptreactjsfirebasegoogle-cloud-firestore

解决方案

您在 App 和 Component 中使用不同的 Firebase 实例。

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

你可以从 firebaseApp.js 导入 firebase 并使用它。更多细节在这里

推荐阅读