在Create React App中使用Firebase保留URL初始化失败求助

咱们先把核心问题拆解清楚：你现在生产环境报错，是因为代码里非开发环境分支直接抛出了错误，但实际上生产环境下，Firebase已经通过HTML里的/__/firebase/init.js自动完成初始化了，根本不需要手动传config；而开发环境的重复加载警告，是因为你既在HTML里用script引入了SDK，又在JS文件里import了Firebase模块，得调整初始化逻辑适配两种环境。

步骤1：修复生产环境初始化逻辑 #

你当前代码在process.env.NODE_ENV !== "development"时直接throw错误，这就是生产环境触发异常的根源。生产环境下，init.js已经帮我们调用了initializeApp，咱们只需要复用已有的实例就行，不需要再手动初始化。

修改你的firebase.js初始化部分：

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import { createFirestoreInstance } from "redux-firestore";

const getRrfProps = (reduxStore) => {
  console.log("inside firebase.js");
  try {
    // 不管什么环境，先检查是否已有Firebase实例
    if (!firebase.apps.length) {
      if (process.env.NODE_ENV === "development") {
        // 开发环境：用env变量手动初始化
        const firebaseConfig = {
          apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
          authDomain: process.env.REACT_APP_FIREBASE_AUTHDOMAIN,
          databaseURL: process.env.REACT_APP_FIREBASE_DATABASEURL,
          projectId: process.env.REACT_APP_FIREBASE_PROJECTID,
          storageBucket: process.env.REACT_APP_FIREBASE_STORAGEBUCKET,
          messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGINGSENDERID,
          appId: process.env.REACT_APP_FIREBASE_APPID,
          measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENTID,
        };
        firebase.initializeApp(firebaseConfig);
      } else {
        // 生产环境：啥也不用干，init.js已经初始化好了
        console.log("生产环境：使用Firebase Hosting自动初始化的实例");
      }
    }
  } catch (error) {
    console.error("[FIREBASE] Firebase初始化异常: ", error);
    return undefined;
  }

  // 持久化设置等后续逻辑保持不变
  firebase
    .firestore()
    .enablePersistence()
    .catch((err) => {
      if (err.code === "failed-precondition") {
        console.error("[FIREBASE PERSISTENCE] - 多标签页打开时，只能在一个标签页启用持久化");
      } else if (err.code === "unimplemented") {
        console.error("[FIREBASE PERSISTENCE] - 当前浏览器不支持持久化所需的全部特性");
      }
    });

  // ... 其他代码
};

步骤2：解决开发环境重复加载警告 #

开发环境的警告是因为你同时通过HTML的script标签和JS的import引入了Firebase SDK，给你两个优化方案：

方案A：环境区分引入SDK #

只在生产环境的HTML里保留Firebase的保留URL脚本，开发环境完全依赖npm包的import：

• 开发时，把public/index.html里所有Firebase相关的script标签（包括init.js）注释掉
• 生产构建前再恢复这些标签，或者用Create React App的环境变量动态注入（比如在HTML里写%REACT_APP_IS_PROD%来判断是否插入脚本）

方案B：迁移到Firebase模块化SDK（推荐） #

如果你的Firebase版本是v9+，建议换成模块化SDK，它支持tree-shaking，能更好地控制加载逻辑，从根源避免重复加载问题。调整后的代码大概是这样：

// 模块化导入示例
import { initializeApp, getApps } from "firebase/app";
import { getFirestore, enablePersistence } from "firebase/firestore";
import { getAuth } from "firebase/auth";

let app;
if (!getApps().length) {
  if (process.env.NODE_ENV === "development") {
    const firebaseConfig = { /* 你的开发环境config */ };
    app = initializeApp(firebaseConfig);
  } else {
    // 生产环境直接用init.js初始化好的实例
    app = getApps()[0];
  }
}

const db = getFirestore(app);
const auth = getAuth(app);

// 持久化设置
enablePersistence(db).catch(/* 错误处理逻辑 */);

最后验证生产环境 #

部署到Firebase Hosting后，打开浏览器控制台检查：

• 没有Firebase初始化错误
• firebase.apps.length等于1，说明实例正常存在
• Firestore、Auth等服务能正常调用

内容的提问来源于stack exchange，提问作者derper