如何解决React项目中出现的Firebase: Error (auth/invalid-api-key)认证错误？

我来帮你一步步排查这个棘手的错误，结合你的代码和配置来看，问题大概率出在环境变量没有被正确加载上，咱们从几个核心关键点入手：

1. 检查环境变量的框架前缀要求 #

不同前端框架对客户端环境变量的命名有强制前缀要求，这是最容易踩的坑：

• 如果用的是Create React App (CRA)：客户端环境变量必须以REACT_APP_开头，你的QUIZZI_FIREBASE_前缀框架会直接忽略，导致process.env.QUIZZI_FIREBASE_API_KEY返回undefined，自然触发无效密钥错误。
• 如果用的是Vite：前缀必须是VITE_；如果是Next.js，客户端可访问的变量需要NEXT_PUBLIC_前缀。

修改你的.env.local文件，给所有变量加上对应框架的前缀，比如CRA场景下：

REACT_APP_QUIZZI_FIREBASE_API_KEY=xxx
REACT_APP_QUIZZI_FIREBASE_AUTH_DOMAIN=xxx
REACT_APP_QUIZZI_FIREBASE_DATABASE_URL=xxx
REACT_APP_QUIZZI_FIREBASE_PROJECT_ID=xxx
REACT_APP_QUIZZI_FIREBASE_STORAGE_BUCKET=xxx
REACT_APP_QUIZZI_FIREBASE_MESSAGING_SENDER_ID=xxx
REACT_APP_QUIZZI_FIREBASE_APP_ID=xxx

然后同步更新firebase.js里的变量引用：

const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_QUIZZI_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_QUIZZI_FIREBASE_AUTH_DOMAIN,
  // ...其他变量同步修改
});

2. 验证环境变量是否真的被读取到 #

在firebase.js里添加一行调试代码，确认变量是否加载成功：

console.log("Firebase API Key:", process.env.REACT_APP_QUIZZI_FIREBASE_API_KEY); // 对应修改后的前缀
const app = firebase.initializeApp({...});

启动开发服务器后看浏览器控制台：

• 如果输出undefined或空字符串：说明环境变量根本没被加载，回到第一步检查前缀和文件位置。
• 如果输出带引号的密钥：说明你在.env里给密钥加了引号（比如QUIZZI_FIREBASE_API_KEY="xxx"），去掉引号即可——环境变量不需要额外引号包裹。

3. 确认.env文件的正确性 #

• 确保文件放在项目根目录，不是src或其他子文件夹里。
• 文件名必须正确：比如.env.local（你当前的命名是对的），不要写成.env.local.txt这类带后缀的格式，系统会识别成文本文件而非环境配置文件。
• 不要在变量和值之间加空格：比如QUIZZI_FIREBASE_API_KEY = xxx会导致值前面多了空格，变成无效密钥。

4. 彻底清除缓存并重启服务 #

有时候旧的配置缓存会干扰新环境变量的加载：

1. 完全关闭开发服务器（关掉终端窗口，不是简单刷新页面）。
2. 清空浏览器的本地存储和缓存。
3. 重新启动开发服务器，确保新的环境变量被正确加载。

5. 排除Firebase密钥本身的问题 #

如果以上步骤都试过还是报错，可以暂时硬编码API密钥测试：

const app = firebase.initializeApp({
  apiKey: "你的真实API密钥",
  // ...其他配置
});

如果这样能正常运行，说明还是环境变量的问题；如果还是报错，那要去Firebase控制台确认：

• 你复制的是Web应用的API密钥（在控制台→项目设置→应用→Web应用→SDK配置里的apiKey），而不是服务端的私钥（firebase-admin用的是JSON私钥，和客户端API密钥完全不同）。

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