如何解决React项目Firebase 9.0出现auth/invalid-api-key错误的问题

• 确认.env文件的位置与命名规范

  必须将.env文件放在项目根目录（和package.json文件同级），不允许放在src目录下。同时检查Windows系统是否隐藏了文件后缀，避免文件实际命名为.env.txt导致无法识别。

• 确认环境变量命名符合React规则
  React要求所有自定义环境变量必须以REACT_APP_为前缀，同时核对.env文件中的变量名和代码中调用的变量名完全一致，无大小写、拼写错误：

  // .env文件中正确写法示例，不要加多余引号、空格
  REACT_APP_FIREBASE_API_KEY=你从Firebase复制的密钥
  

• 重启本地开发服务
  环境变量仅在开发服务启动时加载，修改.env文件后必须完全停止当前运行的npm start/yarn start进程，重新启动服务后修改才会生效。
• 验证环境变量是否正确注入
  在Firebase初始化文件中加入日志打印，打开浏览器控制台确认变量值是否正确：

  const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    // 其余配置...
  };
  // 新增打印验证
  console.log('Firebase API Key:', process.env.REACT_APP_FIREBASE_API_KEY);
  

  如果输出为undefined说明环境变量未被正确注入，回到前两步排查；如果输出值和你复制的密钥不一致，检查.env文件中是否存在多余空格、换行、未闭合的引号。
• 修正getAuth初始化写法
  你当前代码中getAuth()未传入初始化后的app实例，修改为：

  const app = initializeApp(firebaseConfig);
  export const auth = getAuth(app); // 必须传入app参数
  

• 检查多环境变量文件冲突
  如果项目中存在.env.local、.env.development等其他环境变量文件，这类文件优先级高于普通.env文件，需要确认这些文件中是否存在同名的错误配置覆盖了你的设置。

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