Netlify部署后Firebase环境变量未定义问题求助

本地服务器运行一切正常，但部署到Netlify后，从环境变量获取的Firebase相关API参数却变为undefined，触发报错：Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key)。已在Netlify设置中添加环境变量，也尝试清除缓存重新部署，但问题依旧。

附Firebase配置代码：

//firebaseConfig.ts
import { initializeApp } from 'firebase/app';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
export const provider = new GoogleAuthProvider();

以下是几个实用的排查和解决步骤：

• 严格匹配环境变量名称
  检查Netlify后台添加的环境变量名称是否和代码中的REACT_APP_FIREBASE_*完全一致，大小写、下划线、后缀都不能出错。比如代码里是REACT_APP_FIREBASE_API_KEY，Netlify里就不能写成小写或者少加下划线。

• 确认环境变量关联的分支
  在Netlify的环境变量设置页，要确保变量是绑定到当前部署的目标分支（比如main/master），别不小心加到了测试分支的配置里，导致主分支部署时读不到变量。

• 核对构建命令
  Create React App项目的构建命令必须是npm run build，Netlify只会在构建阶段注入环境变量。如果用了自定义构建脚本，要确保脚本没有覆盖环境变量的注入逻辑。

• 彻底清除缓存重新构建
  不要只清缓存，去Netlify的部署记录里找到对应部署，点击「重新部署」，然后勾选「清除缓存并重新构建」，确保构建流程能重新读取最新的环境变量配置。

• 验证构建时变量是否注入成功
  修改Netlify的构建命令，添加打印变量的步骤，比如改成echo $REACT_APP_FIREBASE_API_KEY && npm run build，然后查看构建日志。如果日志里没输出正确的密钥，说明变量没被注入，得回头检查Netlify的变量配置。

• 检查netlify.toml配置（如果有）
  如果你项目里用了netlify.toml，可以在文件里明确声明环境变量（后台配置优先级更高），示例：

  [build]
    command = "npm run build"
    publish = "build"
  
  [context.production.environment]
    REACT_APP_FIREBASE_API_KEY = "你的API密钥"
    # 其他Firebase变量依次添加
  

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