React NextJS Firebase 错误刷新名为“[DEFAULT]”的 Firebase 应用程序已经存在

IT技术 reactjs firebase next.js
2021-03-24 05:46:32

我启动了一个项目,但在多个组件中导入 firebase 时发生错误。

在这个 firebase 启动文件中:

import firebase from 'firebase'
const firebaseConfig = {
  apiKey: "fdsfsdfdsf",
  authDomain: "fdsfdsfsdfdsf",
  databaseURL: "sdfdsfdsf",
  projectId: "dsfdsfdsf",
  storageBucket: "dsfdsfdsf",
  messagingSenderId: "dsfdsfsdfdsf"
}

const FbApp = firebase.initializeApp(firebaseConfig)

export default FbApp.auth()

然后在组件中:

import firebase from '../lib/firebaseClient'

使用单个组件效果很好,但如果我添加一个新组件:

import firebase from '../lib/firebaseClient' 

申请失败:

FirebaseError:Firebase:名为“[DEFAULT]”的 Firebase 应用程序已经存在(应用程序/重复应用程序)。

6个回答

我有同样的问题,然后我发现了这一点:

if (!firebase.apps.length) {
  firebase.initializeApp({});
}

https://github.com/zeit/next.js/issues/1999

解决方案:

import firebase from 'firebase'

try {
  firebase.initializeApp({
    databaseURL: 'dfgdfg'
  })
} catch (err) {
  // we skip the "already exists" message which is
  // not an actual error when we're hot-reloading
  if (!/already exists/.test(err.message)) {
    console.error('Firebase initialization error', err.stack)
  }
}

const auth = firebase.auth()
export default auth

我的理解是该错误是由于多次为您的数据库调用 initializeApp() 所致。扫描您的代码以确保您只调用 initializeApp() 一次。对我来说,这包括检查任何可能调用该方法的 js 文件并检查 html 文件中是否存在重复的 js 文件。

我最近在自己的代码中解决了这个错误。我的问题是由于不小心在我的 html 文件的头部和正文中链接了调用 initializeApp() 的 javascript 文件引起的。我的解决方法是删除 html 文件头部重复的 javascript 标签,这样正文中只存在一个。

在服务器端,这样的事情应该可以工作

const admin = require('firebase-admin');
const serviceAccount = require('./../../credentials/server');

// Check if firebase already been initialized
if (!admin.apps.length) {
  // Initialize Firestore.
  admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
  });
}

总结所有好的答案。更好的解决方法是将环境变量从.env.localinto加载process.env

//.env.local
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=

接下来,我们可以像这样在客户端初始化 Firebase SDK。

//shared/configs/firebase.js
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

const clientCredentials = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  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,
};

if (!firebase.apps.length) {
  firebase.initializeApp(clientCredentials);
}

export default firebase;

最后,将 Firebase deps 导入其他文件。

//pages/index.js
import firebase from '../shared/configs/firebase';