Vercel与React环境下Firebase环境变量配置报错排查

我的Firestore规则： #

rules_version = '2';
cloudservice.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
      allow read, write: if request.origin == "https://......app/";
      allow read, write: if request.origin == "https://...dev/";
    }
  }
}

问题详情： #

通过GitHub将React项目部署到Vercel时，我在Firebase配置文件中使用环境变量存储API密钥，且已在Vercel后台配置好对应环境变量值，同时Firebase也已配置指向Vercel和Cloudflare的域名，但网站无法加载，出现以下错误：

Firebase: Error (invalid authentication/api-key)

若直接在项目中硬编码Firebase API密钥，部署后网站可正常加载且无报错。

核心原因 #

环境变量未被正确注入生产环境的构建流程，导致Firebase初始化时获取的API密钥为空或无效值。

具体排查与解决步骤 #

1. Vercel环境变量配置校验

   • 确认变量是在Production环境下配置的，Vercel只会将对应环境的变量注入构建，仅配置Development环境的话生产部署时无法读取。
   • 检查变量名与代码中使用的名称完全一致，比如代码用REACT_APP_FIREBASE_API_KEY，Vercel里不能输成REACT_APP_FIREBASE_APIKEY（少下划线这类细节）。
   • 确认变量值无多余空格、换行符，复制的API密钥完整无误。

2. React环境变量命名规范

   • Create React App脚手架要求自定义环境变量必须以REACT_APP_开头，若你的变量名没有这个前缀，构建时会被自动忽略，导致代码读取不到值。

3. 清除Vercel构建缓存

   • Vercel可能复用旧构建缓存，导致新配置的环境变量未生效。在Vercel项目的部署记录中，手动触发重新部署并清除缓存。

4. Firebase初始化代码检查

   • 确保代码正确读取环境变量，示例：

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

   • 不要添加无效的默认值覆盖，避免空值或错误值被传入初始化方法。

5. Firestore规则优化（额外提示）

   • 你的规则中allow read, write: if true;会直接允许所有读写请求，后面的域名限制规则不会生效（Firebase规则为逻辑或，满足任意条件即允许访问）。若需限制域名，需删除这行规则，仅保留origin校验的配置。

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