SvelteKit配置Firebase AppCheck遇400错误，请求URL含undefined

问题描述 #

我正在使用SvelteKit开发Web应用，尝试配置Firebase AppCheck。已为应用注册reCAPTCHA并添加了如下基础代码：

onMount(async () => {
    const appCheck = initializeAppCheck(app, {
        provider: new ReCaptchaV3Provider('my-key'),
        isTokenAutoRefreshEnabled: true
    })
}) 

但运行时出现400错误，原因是POST请求的URL中，本该填写Firebase相关信息的位置显示为undefined，请求URL为：
https://content-firebaseappcheck.googleapis.com/v1/projects/undefined/apps/undefined:exchangeRecaptchaV3Token?key=undefined

原因分析 #

这个错误的核心原因是Firebase应用实例（app）未被正确初始化，导致AppCheck无法读取项目ID、应用ID和API key等必要参数，进而使请求URL的对应位置出现undefined。常见触发场景包括：

• Firebase App初始化代码执行顺序晚于AppCheck初始化代码
• Firebase配置参数（apiKey、projectId、appId等）未正确传入或加载失败
• 未适配SvelteKit的服务端/客户端环境差异，导致初始化逻辑在不兼容的环境中执行

解决步骤 #

1. 确保Firebase App先于AppCheck完成初始化 #

必须在调用initializeAppCheck前完成Firebase App的初始化，且传入完整配置参数。示例代码如下：

import { initializeApp } from "firebase/app";
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";
import { onMount } from "svelte";

// 从Firebase控制台复制的完整配置
const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的MESSAGING_SENDER_ID",
  appId: "你的APP_ID"
};

// 先初始化Firebase App
const app = initializeApp(firebaseConfig);

onMount(async () => {
  // 再初始化AppCheck
  const appCheck = initializeAppCheck(app, {
    provider: new ReCaptchaV3Provider('你的reCAPTCHA_V3_KEY'),
    isTokenAutoRefreshEnabled: true
  });
});

2. 适配SvelteKit的环境差异 #

SvelteKit的服务端渲染环境无法正常使用reCAPTCHA，需确保AppCheck仅在客户端执行。除了onMount（仅客户端运行），还可通过browser变量判断环境：

import { browser } from '$app/environment';
import { initializeApp } from "firebase/app";
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";

const firebaseConfig = { /* 你的配置 */ };
const app = initializeApp(firebaseConfig);

if (browser) {
  const appCheck = initializeAppCheck(app, {
    provider: new ReCaptchaV3Provider('你的reCAPTCHA_V3_KEY'),
    isTokenAutoRefreshEnabled: true
  });
}

3. 验证Firebase配置参数正确性 #

• 登录Firebase控制台，进入对应项目的「设置」→「项目设置」→「应用」
• 复制Web应用配置代码中的参数，确保apiKey、projectId、appId无遗漏或拼写错误

4. 检查reCAPTCHA V3配置 #

• 确认reCAPTCHA V3站点密钥是为当前域名生成的
• 在Firebase控制台「App Check」页面，已将该密钥与你的Web应用关联

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