(React 和 Firebase 版本 9.6.9)Firebase：名为 '[DEFAULT]' 的 Firebase 应用已存在，具有不同的选项或配置(应用/复制应用)

Question

我正在为登录系统编写一个带有firebase版本9.6.9的React应用程序，但这个错误一直在妨碍我。我已经尝试过这种方法：

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { async } from '@firebase/util';
import { firebase } from "firebase/app";
import { getAuth, onAuthStateChanged, connectAuthEmulator, 
signInWithEmailAndPassword, createUserWithEmailAndPassword, 
signOut } from "firebase/auth";
export const firebaseApp = initializeApp({
//Configuration stuff
});
if (firebase.apps.length === 0/*or !firebase.apps.length*/) {
firebase.initializeApp(firebaseConfig);
}`

我当前的代码如下：

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { async } from '@firebase/util';
import { firebase } from "firebase/app";
import { getAuth, onAuthStateChanged, connectAuthEmulator, 
signInWithEmailAndPassword, createUserWithEmailAndPassword, 
signOut } from "firebase/auth";

export const firebaseApp = initializeApp({
//Configuration stuff
});
export const app = initializeApp(firebaseApp);
export const analytics = getAnalytics(app);
export const auth = getAuth(firebaseApp);

有什么建议吗？

Answer 1

为什么要初始化firebase应用程序两次？

export const firebaseApp = initializeApp({
//Configuration stuff
});
export const app = initializeApp(firebaseApp); <- remove this line

你需要确保你的firebase应用程序只初始化一次，把你的代码改为：

export const firebaseApp = !getApps().length ? initializeApp(firebaseConfig) : getApp();

不要忘记导入getApps()和getApp()

import { getApp, getApps, initializeApp } from 'firebase/app';

顺便说一下，您不需要export const firebaseApp，因为您不会在该文件中使用它。

Answer 2

看起来像这样：

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
const firebaseConfig = {
apiKey: 'XXXXXXXXXXXXXX',
authDomain: 'XXXX.firebaseapp.com',
databaseURL: 'https://dburl.firebaseio.com',
projectId: 'proj-XXXX',
storageBucket: 'XXXXX.appspot.com',
messagingSenderId: 'XXXXXXX',
appId:XXXXXXXXXXXXXXXXXX"
};

firebase.initializeApp(firebaseConfig);
export const firebaseAuth = firebase.auth();
export const firestore = firebase.firestore()

然后使用：

import { firebaseAuth } from 'firebase'
const CustomComponent = props => {
const [email, setEmail] = useState()
const [password, setPassword] = useState()
const handleAuth = e => {
firebaseAuth.signInWithEmailAndPassword(email, password).then(res => {
console.log(res.user)
}).catch(err => {
const { code, message } = err
console.log(code, message)
})
}
return (<button onClick={handleAuth}>firebase</button>)