React项目用.env配置Firebase遇auth/invalid-api-key错误求助

问题现象 #

直接在firebase.config.js中写入明文密钥时，Firebase集成正常；将密钥迁移到.env文件通过process.env读取后，触发Firebase: Error (auth/invalid-api-key)错误。

本地报错信息 #

Firebase: Error (auth/invalid-api-key).
createErrorInternal
C:/Users/user1/src/core/util/assert.ts:142
  139 |   );
  140 | }
  141 | 
> 142 | return _DEFAULT_AUTH_ERROR_FACTORY.create(
      | ^  143 |   authOrCode,
  144 |   ...(rest as AuthErrorListParams<K>)
  145 | );

相关代码 #

明文密钥写法（可正常运行） #

// const firebaseConfig = {
//   apiKey: "raw key",
//   authDomain: "raw key",
//   projectId: "raw key",
//   storageBucket: "raw key",
//   messagingSenderId: "raw key",
//   appId: "raw key",
//   measurementId: "raw key"
// }

.env读取写法（触发报错） #

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID 
}

const app = firebase.initializeApp(firebaseConfig);
const firestore = app.firestore();
const auth = app.auth();

export { auth, firestore }

.env文件内容 #

REACT_APP_FIREBASE_API_KEY = raw key
REACT_APP_FIREBASE_AUTH_DOMAIN = raw key
REACT_APP_FIREBASE_DATABASE_URL = raw key
REACT_APP_FIREBASE_PROJECT_ID = raw key
REACT_APP_FIREBASE_STORAGE_BUCKET = raw key
REACT_APP_FIREBASE_MESSAGING_SENDER_ID = raw key
REACT_APP_FIREBASE_APP_ID = raw key
REACT_APP_MEASUREMENT_ID = raw key

排查与解决方案 #

1. 修正.env文件格式 #

.env中变量名和值之间不能有空格，当前写法REACT_APP_FIREBASE_API_KEY = raw key会导致环境变量读取失败，正确格式为：

REACT_APP_FIREBASE_API_KEY=raw key
REACT_APP_FIREBASE_AUTH_DOMAIN=raw key
REACT_APP_FIREBASE_DATABASE_URL=raw key
REACT_APP_FIREBASE_PROJECT_ID=raw key
REACT_APP_FIREBASE_STORAGE_BUCKET=raw key
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=raw key
REACT_APP_FIREBASE_APP_ID=raw key
REACT_APP_MEASUREMENT_ID=raw key

2. 匹配变量名 #

firebase.config.js中使用了process.env.REACT_APP_FIREBASE_SENDER_ID，但.env中对应的变量名是REACT_APP_FIREBASE_MESSAGING_SENDER_ID，变量名不匹配会导致值读取为undefined，需统一为：

messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,

3. .env.local相关说明 #

• .env.local是Create React App默认支持的本地环境文件，无需额外安装依赖，VS Code识别为普通文本不影响使用，只要文件名正确即可生效。
• 重复初始化Firebase App的方案不可行，提示重复初始化说明已有有效实例，问题根源不在初始化方式，而是环境变量读取失败。

4. 验证环境变量读取状态 #

在firebase.config.js中添加打印语句，确认环境变量是否正常加载：

console.log("API Key:", process.env.REACT_APP_FIREBASE_API_KEY);
console.log("所有环境变量:", process.env);

若打印结果为undefined，需检查.env文件是否放在项目根目录（与package.json同级），并重启React开发服务器（修改.env后需重启才能生效）。

总结 #

核心问题为.env文件格式错误（等号前后空格）+ 变量名不匹配，导致Firebase初始化时无法获取有效的API Key，引发auth/invalid-api-key错误。修正格式与变量名后，重启开发服务器即可解决。

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