Vue 3集成Firebase App Check报错：无效的应用资源名称

问题描述 #

我正尝试在Vue 3 Web应用中配置Firebase App Check，已完成Firebase与reCAPTCHA v3的基础配置。初始化代码如下（已通过控制台打印确认reCAPTCHA站点密钥环境变量注入正常）：

const fbConfig = {
    apiKey: import.meta.env.VITE_APP_FIREBASE_APIKEY,
    authDomain: import.meta.env.VITE_APP_FIREBASE_AUTHDOMAIN,
    projectId: import.meta.env.VITE_APP_FIREBASE_PROJECTID,
    appId: import.meta.env.VITE_APP_FIREBASE_APPID,
    storageBucket: import.meta.env.VITE_APP_STORAGEBUCKET,
    messagingSenderId: import.meta.env.VITE_APP_MESSAGINGSENDERID,
}

const fbapp = initializeApp(fbConfig)

if (location.hostname === "localhost") {
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

console.log("APPCHECK Token: ", import.meta.env.VITE_APP_RECAPTCHA_SITEKEY)
const appCheck = initializeAppCheck(fbapp, {
    provider: new ReCaptchaV3Provider(import.meta.env.VITE_APP_RECAPTCHA_SITEKEY),
    isTokenAutoRefreshEnabled: true
});

本地环境使用调试Token时一切正常，但部署到正式站点后出现如下错误：

{ code: 400, message: "Invalid app resource name: \"projects/<name removed>/apps/\"<code removed>\"\"", status: "INVALID_ARGUMENT" }

解决步骤 #

• 检查App ID的环境变量值：部署环境下的VITE_APP_FIREBASE_APPID可能被意外添加了引号或转义字符。部署后在浏览器控制台打印import.meta.env.VITE_APP_FIREBASE_APPID，确认值是纯净的Firebase App ID（格式示例：1:123456789:web:abcdef123456），没有多余的引号包裹。如果有，修正环境变量配置，移除多余引号。
• 重新确认reCAPTCHA v3的关联配置：登录Firebase控制台，进入「App Check」模块，找到对应的Web应用，确认绑定的reCAPTCHA v3站点密钥正确，且该密钥的域名白名单已包含你的正式部署域名（在Google reCAPTCHA控制台配置）。
• 强制清除部署缓存：部分部署平台会缓存旧的环境变量或构建产物，重新部署时选择清除缓存选项，确保最新配置被加载。
• 调整初始化时机：在Vue3中，将App Check的初始化代码放在onMounted钩子内，确保页面DOM和所有环境变量都已加载完成后再执行初始化，避免因异步加载导致的配置读取异常。

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