为何Firebase在React应用中被初始化两次？

核心原因：React Strict Mode的开发环境行为 #

在开发环境下，React的Strict Mode会刻意重复执行组件渲染函数、useEffect/useLayoutEffect回调、状态更新setter等操作，目的是提前检测代码中的潜在问题（比如非幂等副作用、内存泄漏）。你的useEffect依赖为空数组，理论上仅执行一次，但在Strict Mode的开发环境中会被触发两次，导致initFirebase被调用两次。

解决方案 #

方案1：让初始化函数变为幂等操作（推荐） #

修改initFirebase函数，先检查是否已存在Firebase实例，避免重复初始化：

import { initializeApp, getApps } from "firebase/app";

const initFirebase = () => {
  // 检查是否已有初始化的app实例
  if (getApps().length > 0) {
    return getApps()[0];
  }
  
  const firebaseConfig = {
    apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
    authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
    projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
    storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
    appId: import.meta.env.VITE_FIREBASE_APP_ID,
  };

  const app = initializeApp(firebaseConfig);
  console.log("Initialized firebase app", app);
  return app;
};

export default initFirebase;

这样即使initFirebase被多次调用，也只会在第一次执行初始化逻辑，后续调用直接返回已有实例，控制台仅打印一次日志。

方案2：暂时关闭Strict Mode（仅用于验证） #

若只想验证问题是否由Strict Mode导致，可找到项目入口文件（通常是index.js/main.jsx），移除包裹App组件的<React.StrictMode>标签。但不推荐长期这么做，因为Strict Mode能帮你提前发现代码隐患。

补充说明 #

Strict Mode的重复执行仅存在于开发环境，生产环境下不会有该行为，原代码在生产环境中只会初始化一次。但为了代码健壮性，仍推荐使用方案1的幂等逻辑，避免其他场景下的意外重复初始化。

内容的提问来源于stack exchange，提问作者U. Watt