Google登录报Firebase app/duplicate-app重复初始化错误

问题描述 #

使用signInWithGoogle实现谷歌登录功能时抛出报错：Firebase App named '[DEFAULT]' already exists (app/duplicate-app)，尝试更换依赖版本、查阅官方开发文档等排查手段后问题仍持续复现。

项目依赖版本 #

• firebase: ^7.20.0
• react-firebase-hooks: ^2.2.0

问题相关代码 #

1. firebaseInit.js 初始化文件 #

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

const config = {
  //config
};

firebase.initializeApp(config);

export const myFirebase = firebase;
export const myProvider = new firebase.auth.GoogleAuthProvider();
export const myAuth = firebase.auth();
export const myFirestore = firebase.firestore();
export const myAnalytics = firebase.analytics();

2. Login.js 登录组件 #

import { useAuthState } from "react-firebase-hooks/auth";
import { myAuth, myProvider } from "../../firebaseInit";

function Login() {
  const [user] = useAuthState(myAuth);

  const signInWithGoogle = () => {
    myAuth.signInWithPopup(myProvider).catch((err) => console.log(err));
  };
  return (
    <>
      <div className="login">
        <button onClick={signInWithGoogle}>Sign In With Google</button>
        {user ? 'welcome' : 'bye bye'}
      </div>
    </>
  );
}

报错原因 #

错误触发核心是firebase.initializeApp(config)被重复执行，常见触发场景：

• 开发环境热更新（HMR）时未做初始化校验，重复运行初始化逻辑
• 项目内其他文件单独引入firebase并调用了initializeApp
• 组件重渲染、路由跳转时重复触发初始化文件的执行

修复方案 #

修改firebaseInit.js中的初始化逻辑，执行初始化前先校验默认Firebase应用是否已创建，避免重复初始化：
将原有直接调用firebase.initializeApp(config)的代码替换为带校验的逻辑：

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

修改后完整的firebaseInit.js代码如下：

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

const config = {
  // 填入对应Firebase配置参数
};

// 增加重复初始化校验
if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

export const myFirebase = firebase;
export const myProvider = new firebase.auth.GoogleAuthProvider();
export const myAuth = firebase.auth();
export const myFirestore = firebase.firestore();
export const myAnalytics = firebase.analytics();

注意：校验逻辑添加完成后，需确认全项目仅在该文件内执行Firebase初始化操作，所有需要使用auth、firestore等实例的位置统一从该初始化文件导入，禁止在其他业务文件中单独引入firebase包后重复调用初始化方法。

内容的提问来源于stack exchange，提问作者Tejendra Singh Rajawat