Firebase Google Authentication本地正常Netlify部署后无法使用问题咨询

从报错信息可以直接定位问题：你生成的iframe URL中authDomain部分前后出现了%22字符，这是双引号的URL编码形式，说明Firebase初始化时读取的authDomain参数被额外包裹了双引号，导致最终拼接的iframe地址格式非法，浏览器无法正常加载。
本地localhost环境下.env文件的读取逻辑会自动忽略值两端的引号（部分前端打包工具的内置特性），所以本地测试没有触发问题，而Netlify的环境变量读取会保留你填写的所有字符，导致多余的引号被带入配置中，仅线上部署报错。

• 第一步检查Netlify环境变量配置：登录Netlify后台进入对应站点的「Environment Variables」页，找到你配置的Firebase authDomain对应变量（通常命名为REACT_APP_FIREBASE_AUTH_DOMAIN），确认变量值的前后没有手动添加单引号或双引号，直接填写纯域名trail-app-7d2e3.firebaseapp.com即可，Netlify的环境变量系统不需要额外用引号包裹值。
• 第二步检查本地Firebase初始化代码：确认你读取环境变量拼接Firebase配置的逻辑没有额外加引号，示例正确写法如下：

// 正确写法
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
};

不要出现authDomain: "${process.env.REACT_APP_FIREBASE_AUTH_DOMAIN}"``这类多余包裹引号的错误写法。

• 以上修改完成后，需要在Netlify后台重新触发一次站点部署，新的环境变量才会生效。
• 额外校验项：确认Firebase控制台「Authentication→设置→已授权的网域」列表中，已经添加你的Netlify站点域名trailapp.netlify.app，避免后续出现跨域拦截问题。

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