Angular 17集成Firebase AppCheck遇document未定义错误求助

错误根源是Angular 17默认启用SSR（服务器端渲染），服务器端环境中不存在document对象，而ReCaptchaEnterpriseProvider初始化时需要访问浏览器的document加载reCAPTCHA脚本，因此在服务器端执行时触发错误。以下是两种可行解决方案：

方案一：仅在浏览器环境初始化AppCheck（保留SSR） #

通过Angular的isPlatformBrowser工具判断当前环境，仅在浏览器端执行AppCheck初始化逻辑，避免服务器端调用。

修改app.config.ts #

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideAppCheck, initializeAppCheck, ReCaptchaEnterpriseProvider } from '@angular/fire/app-check';
import { PLATFORM_ID, inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    // 初始化Firebase App
    provideFirebaseApp(() => initializeApp({
      apiKey: 'YOUR_API_KEY',
      authDomain: 'YOUR_AUTH_DOMAIN',
      projectId: 'YOUR_PROJECT_ID',
      storageBucket: 'YOUR_STORAGE_BUCKET',
      messagingSenderId: 'YOUR_SENDER_ID',
      appId: 'YOUR_APP_ID'
    })),
    // 条件初始化AppCheck
    provideAppCheck(() => {
      const platformId = inject(PLATFORM_ID);
      // 仅在浏览器环境执行初始化
      if (isPlatformBrowser(platformId)) {
        return initializeAppCheck(undefined, {
          provider: new ReCaptchaEnterpriseProvider('YOUR_RECAPTCHA_ENTERPRISE_KEY'),
          isTokenAutoRefreshEnabled: true
        });
      }
      // 服务器端返回空Promise，跳过初始化
      return Promise.resolve(undefined);
    })
  ]
};

（可选）独立工具类中初始化 #

如果使用firebaseUtils.ts独立管理Firebase初始化，同样加入平台判断：

import { Injectable, PLATFORM_ID, inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { initializeApp } from 'firebase/app';
import { initializeAppCheck, ReCaptchaEnterpriseProvider } from 'firebase/app-check';

@Injectable({ providedIn: 'root' })
export class FirebaseUtils {
  private platformId = inject(PLATFORM_ID);
  private firebaseConfig = { /* 你的Firebase配置 */ };

  initialize() {
    const app = initializeApp(this.firebaseConfig);
    
    if (isPlatformBrowser(this.platformId)) {
      initializeAppCheck(app, {
        provider: new ReCaptchaEnterpriseProvider('YOUR_RECAPTCHA_KEY'),
        isTokenAutoRefreshEnabled: true
      });
    }
  }
}

之后在组件或APP_INITIALIZER中调用initialize()即可。

方案二：禁用SSR（简化配置，适合纯静态Web应用） #

如果你的应用不需要服务器端渲染，可以直接禁用SSR，让整个应用在浏览器端执行，自然避免document未定义问题：

1. 打开angular.json，删除architect下的server配置节点。
2. 修改architect/build的options，添加：

"ssr": false,
"prerender": false

3. 删除项目根目录下的server.ts文件（如果存在）。

额外检查项 #

• 确认package.json中依赖版本兼容：

  "@angular/fire": "^17.0.0",
  "firebase": "^10.7.0",
  "@angular/core": "^17.0.0"
  

• 验证Firebase控制台中已正确配置reCAPTCHA企业版密钥，并将当前应用域名加入允许列表。

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