React集成Firebase AppCheck报错appCheck is not a function如何解决

1. 适配SDK版本的导入与调用写法 #

该报错90%以上的场景是Firebase v9+模块化SDK和v8命名空间写法不匹配导致的，根据你使用的版本选择对应写法即可：

• 使用v9+模块化SDK（官方推荐）

// 先导入Firebase核心
import { initializeApp } from "firebase/app";
// 单独导入AppCheck相关API
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";

const firebaseConfig = {
  // 你的Firebase项目配置
};

// 必须先初始化核心App实例
const app = initializeApp(firebaseConfig);
// 再初始化AppCheck
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider('你的reCAPTCHA v3站点密钥'),
  isTokenAutoRefreshEnabled: true
});

• 兼容v8命名空间写法
  如果要继续使用firebase.appCheck()的调用格式，需要导入兼容包：

import firebase from 'firebase/compat/app';
import 'firebase/compat/app-check';

const app = firebase.initializeApp(firebaseConfig);
const appCheck = firebase.appCheck();
appCheck.activate('你的reCAPTCHA v3站点密钥', true);

2. 检查依赖安装完整性 #

执行对应命令确认Firebase依赖正常安装：

# npm安装
npm install firebase
# yarn安装
yarn add firebase

安装完成后可以在package.json中确认firebase依赖存在且版本符合预期。

3. 确认初始化顺序 #

必须先执行Firebase核心App的初始化，再调用AppCheck的初始化方法，顺序颠倒也会触发该报错。

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