React项目Firebase API密钥无效问题的排查与修复求助

1. 修正.env文件格式 #

你的project/frontend/.env文件中环境变量的格式不符合React规范，多余的引号和分号会导致Firebase识别无效API Key。修改为以下格式：

REACT_APP_FIREBASE_API_KEY=xxxxxxx
REACT_APP_FIREBASE_AUTH_DOMAIN=xxxxxxx
REACT_APP_FIREBASE_PROJECT_ID=xxxxxx
REACT_APP_FIREBASE_STORAGE_BUCKET=xxxxx
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=xxxxxx
REACT_APP_FIREBASE_APP_ID=xxxxxxx
REACT_APP_FIREBASE_MEASUREMENT_ID=xxxxxxx

注意：变量值不要加引号（""）和分号（;），React会自动处理字符串类型的环境变量。

2. 重启React开发服务器 #

修改.env文件后，必须重启开发服务器才能让新的环境变量生效，执行：

npm start
# 若使用yarn则执行
yarn start

3. 验证环境变量读取结果 #

在project/frontend/config/firebase.js中临时添加日志，确认读取到的API Key是纯字符串：

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  // ...其他配置
};

// 临时添加打印，确认值正确
console.log("API Key:", process.env.REACT_APP_FIREBASE_API_KEY);

如果输出包含引号或分号，说明.env文件格式仍有问题，需重新检查。

4. 确认文件加载顺序（可选） #

若以上步骤无效，检查AuthContext是否在firebase.js完成初始化前就被调用。确保firebase.js的导出在AuthContext使用之前完成，避免因初始化顺序问题导致环境变量未注入。

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