React集成Firebase AppCheck报错：Component app-check未注册

问题根源 #

你的代码混用了ES模块的import和CommonJS的require导入Firebase模块，这会导致App Check组件无法被正确注册到Firebase应用实例中。React项目默认使用ES模块规范，混用两种导入方式会引发模块加载异常。

修复步骤 #

1. 统一导入方式 #

将require替换为ES模块的import，确保所有Firebase相关导入保持一致：

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth, GoogleAuthProvider } from "firebase/auth";
// 替换require为import
import { initializeAppCheck, ReCaptchaEnterpriseProvider } from "firebase/app-check";

2. 确认App Check包已安装 #

执行命令确保firebase/app-check依赖已正确安装：

npm install firebase/app-check
# 或使用yarn
yarn add firebase/app-check

3. 调整初始化顺序 #

确保initializeAppCheck在Firebase应用实例初始化后立即执行，提前完成组件注册：

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// 先初始化App Check
initializeAppCheck(app, {
  provider: new ReCaptchaEnterpriseProvider(process.env.REACT_APP_RECAPTCHAENTERPRISE),
  isTokenAutoRefreshEnabled: true
});

// 再初始化其他Firebase服务
export const db = getFirestore(app);
export const auth = getAuth(app);
export const provider = new GoogleAuthProvider();

4. 验证控制台配置 #

• 确认Firebase控制台已启用App Check服务，并配置了正确的ReCaptcha Enterprise密钥
• 若使用普通ReCaptcha v3（非Enterprise版），需将ReCaptchaEnterpriseProvider替换为ReCaptchaV3Provider，并使用对应的v3站点密钥

最终修复后的完整代码 #

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth, GoogleAuthProvider } from "firebase/auth";
import { initializeAppCheck, ReCaptchaEnterpriseProvider } from "firebase/app-check";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_APIKEY,
  authDomain: process.env.REACT_APP_AUTHDOMAIN,
  projectId: process.env.REACT_APP_PROJECTID,
  storageBucket: process.env.REACT_APP_STORAGEBUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID,
  appId: process.env.REACT_APP_APPID,
  measurementId: process.env.REACT_APP_MEASUREMENTID
};

const app = initializeApp(firebaseConfig);

// 初始化App Check
initializeAppCheck(app, {
  provider: new ReCaptchaEnterpriseProvider(process.env.REACT_APP_RECAPTCHAENTERPRISE),
  isTokenAutoRefreshEnabled: true
});

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

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