React初始化Firebase时遭遇auth/invalid-api-key错误求助

错误信息 #

Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key).
    at createErrorInternal (assert.ts:142:1)
    at _assert (assert.ts:167:1)
    at new Auth (auth.ts:56:1)
    at instance.INTERNAL.registerComponent._firebase_component__WEBPACK_IMPORTED_MODULE_2__.Component.setServiceProps.ActionCodeInfo.Operation.EMAIL_SIGNIN [as instanceFactory] (index.ts:82:1)
    at Provider.getOrInitializeService (provider.ts:318:1)
    at Provider.getImmediate (provider.ts:115:1)
    at FirebaseAppImpl._getService (firebaseApp.ts:138:1)
    at firebaseAppImpl.<computed> [as auth] (firebaseNamespaceCore.ts:185:1)
    at Object.serviceNamespace [as auth] (firebaseNamespaceCore.ts:166:1)
    at new Firebase (firebase.js:17:1)

使用版本 #

• React: 18.2.0
• Firebase: 9.16.0

我的代码 #

firebase.js #

import app from "firebase/compat/app";
import "firebase/compat/auth";

const config = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_ID,
};

class Firebase {
  constructor() {
    app.initializeApp(config);
    this.auth = app.auth();
  }

  // *** Auth API ***
  doCreateUserWithEmailAndPassword = (email, password) =>
    this.auth.createUserWithEmailAndPassword(email, password);

  doSignInWithEmailAndPassword = (email, password) =>
    this.auth.signInWithEmailAndPassword(email, password);

  doSignOut = () => this.auth.signOut();

  doPasswordReset = (email) => this.auth.sendPasswordResetEmail(email);

  doPasswordUpdate = (password) =>
    this.auth.currentUser.updatePassword(password);
}

export default Firebase;

.env文件 #

REACT_APP_API_KEY=AIzsdfceg7Cu22Ma8RYadHVnrSoRwQ-B7ZEejs
REACT_APP_AUTH_DOMAIN=devsproject-75523.firebaseapp.com
REACT_APP_DATABASE_URL = https://devsproject-75523-default-rtdb.firebaseio.com/
REACT_APP_PROJECT_ID=devsproject-75523
REACT_APP_STORAGE_BUCKET=devsproject-75523.appspot.com
REACT_APP_MESSAGING_SENDER_ID=1009026371636
REACT_APP_ID=1:1009026371636:web:a57fr518532bc351d0f6f9

尝试的临时方案 #

修改config对象，给apiKey添加默认值：

const config = {
        apiKey: process.env.REACT_APP_API_KEY || "mock_key",
        // 其他配置项不变
};

修改后页面不再空白，但不确定这是临时规避手段还是真正解决问题，求反馈。

问题根源与解决方案 #

1. 临时方案只是规避报错，未解决根本问题 #

用"mock_key"作为默认值，确实能让Firebase初始化不抛错，但所有Auth相关功能会完全失效——因为mock_key不是有效的Firebase API密钥，后续调用登录、注册等接口都会失败，这只是让页面不崩溃的临时手段，不能作为最终解决方案。

2. 真正的问题排查方向 #

（1）环境变量加载失败

React项目读取.env变量需满足以下条件：

• 变量名必须以REACT_APP_开头（已满足）
• .env文件需放在项目根目录（与package.json同级）
• 修改.env后必须重启开发服务器——React仅在启动时加载环境变量，热更新不会重新读取
• 去掉.env中变量等号前后的空格：比如你写的REACT_APP_DATABASE_URL = ，等号后的空格会被包含到变量值里，导致URL无效，建议所有变量写成KEY=VALUE格式，无多余空格

（2）确认API密钥本身有效

登录Firebase控制台，进入项目设置→「应用」标签，找到你的Web应用，复制官方提供的配置代码，对比你的API密钥是否完全一致（注意不要漏字符、多空格）。

（3）检查环境变量是否被正确读取

可在firebase.js中临时添加打印代码：

console.log("加载的API_KEY:", process.env.REACT_APP_API_KEY);

如果打印结果为undefined，说明环境变量未加载成功；如果是正确密钥，再检查Firebase控制台的Auth服务是否开启——若Auth服务未启用，也可能触发类似密钥错误。

3. 正确修复步骤 #

1. 清理.env中所有变量等号前后的空格，统一写成KEY=VALUE格式
2. 完全关闭开发服务器，重新启动（执行npm start/yarn start）
3. 通过打印确认环境变量已正确加载
4. 确认Firebase控制台中Auth服务已启用（至少开启邮箱密码登录方式）
5. 移除|| "mock_key"的默认值，重新测试功能

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