React项目连接Firebase模拟器时ApiKey无效错误求助

问题现象 #

React项目接入Firebase后，生产环境运行正常，但切换到本地模拟器时出现以下错误：

POST https://firebaseinstallations.googleapis.com/v1/projects/demo-project/installations 400

FirebaseError: Installations: Create Installation request failed with error "400 INVALID_ARGUMENT: API key not valid. Please pass a valid API key." (installations/request-failed).

当前firebase.js配置如下：

const firebaseConfig = {
  apiKey: process.env.REACT_APP_APIKEY,
  authDomain: process.env.REACT_APP_AUTHDOMAIN,
  projectId: process.env.REACT_APP_PROJECTID,
  storageBucket: process.env.REACT_APP_STORAGEBUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID,
  appId: process.env.REACT_APP_APPID,
  measurementId: process.env.REACT_APP_MEASUREMENTID,
};

const hostname = window.location.hostname;
const app =
  hostname === "localhost"
    ? initializeApp({
        apiKey: "demo-key",
        authDomain: "demo-test",
        projectId: "demo-project",
        storageBucket: "default-bucket",
        appId: "demo-appId",
      })
    : initializeApp(firebaseConfig);

export let auth = getAuth(app);
export let db = getFirestore(app);
export const storage = getStorage(app);
export let functions = getFunctions(app);
export const analytics = getAnalytics(app);

if (hostname === "localhost") {
  connectAuthEmulator(auth, "http://localhost:9099");
  connectFirestoreEmulator(db, "localhost", 8080);
  connectStorageEmulator(storage, "localhost", 9199);
  connectFunctionsEmulator(functions, "localhost", 5001);
}

解决思路 #

1. 禁用本地环境的Firebase Analytics #

Firebase Analytics依赖Installations服务，而Firebase模拟器并未提供该服务的本地模拟，导致本地运行时会请求线上的Installations API，进而触发密钥无效错误。

修改代码中Analytics的初始化逻辑，仅在生产环境启用：

// 替换原有的analytics初始化代码
let analytics;
if (hostname !== "localhost") {
  analytics = getAnalytics(app);
}
export { analytics };

2. 本地环境使用合法的API Key #

Firebase应用初始化需要格式合法的API Key，哪怕是连接模拟器。直接复用生产环境的API Key（模拟器不会走线上服务，仅用于初始化校验）：

const app =
  hostname === "localhost"
    ? initializeApp({
        ...firebaseConfig, // 复用生产环境的合法配置
        authDomain: "demo-test", // 仅覆盖模拟器需要的字段
        projectId: "demo-project",
        storageBucket: "default-bucket",
      })
    : initializeApp(firebaseConfig);

3. 确认模拟器服务正常启动 #

• 运行firebase emulators:start时，检查终端输出，确保Auth、Firestore、Storage、Functions的模拟器都在对应端口运行（与代码中connectXXXEmulator的端口一致）。
• 可通过命令firebase emulators:start --only auth,firestore,storage,functions仅启动需要的服务，减少干扰。

4. 清理浏览器缓存与LocalStorage #

本地缓存的旧Firebase配置可能导致冲突，清理浏览器缓存及Firebase相关的LocalStorage条目后，重启项目测试。

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