Firebase Web应用Firestore连接失败及App Check请求未验证问题求助

核心问题定位 #

Firestore提示的「客户端离线」错误，本质是App Check验证异常导致Firebase服务拒绝连接——即使控制台未启用强制验证，客户端启用App Check后仍会携带验证令牌，一旦令牌无效，Firestore会返回「unavailable」错误；而reCAPTCHA的CORS错误则是App Check与reCAPTCHA资源加载冲突或配置不匹配导致的。

分步排查与修复 #

1. 确认App Check是否为问题根源 #

临时禁用App Check，测试Firestore是否恢复正常：

// 修改firebase配置代码，临时禁用App Check
firebase.initializeApp(firebaseConfig);
// firebase.appCheck().activate('mysitekey', true); // 注释原激活代码
firebase.appCheck().activate(null, false); // 禁用App Check验证

如果注册流程中Firestore能正常写入，说明问题完全由App Check配置错误导致。

2. 修复App Check的reCAPTCHA配置 #

• 确认reCAPTCHA类型：必须使用reCAPTCHA v2「我不是机器人」复选框类型，Firebase App Check不兼容invisible v2或v3类型的密钥。
• 检查域名配置：
  登录reCAPTCHA控制台，确保localhost（开发环境）和部署域名已添加，注意不要带http://或https://，直接填写纯域名（如localhost、yourdomain.com），同时排查拼写错误。
• 清理缓存：彻底清除浏览器缓存，用隐身模式重新测试，避免旧的reCAPTCHA令牌残留。

3. 排查Firestore连接的其他可能性 #

• 临时开放Firestore规则测试：在Firebase控制台临时设置规则为开放（仅限测试环境），排除规则误判：

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /{document=**} {
        allow read, write: if true;
      }
    }
  }
  

  如果开放后能写入，说明可能是Auth令牌与App Check令牌的协同验证出现问题，优先回到App Check的配置修复。
• 检查Firebase服务状态：确认Firestore、App Check服务无故障，查看Firebase控制台的「状态」页面。

4. 修复reCAPTCHA CORS错误 #

• 避免手动引入reCAPTCHA脚本：Firebase App Check会自动加载所需的reCAPTCHA资源，手动添加reCAPTCHA脚本会导致资源加载冲突，产生CORS错误。
• 调整脚本加载顺序：确保Firebase核心脚本先加载，再加载Auth、Firestore等服务脚本，避免依赖缺失：

  <script src="https://www.gstatic.com/firebasejs/10.7.0/firebase-app-compat.js" defer></script>
  <script src="https://www.gstatic.com/firebasejs/10.7.0/firebase-auth-compat.js" defer></script>
  <script src="https://www.gstatic.com/firebasejs/10.7.0/firebase-firestore-compat.js" defer></script>
  <script src="scripts/firebase.js" defer></script>
  

5. 代码异步逻辑优化（潜在问题修复） #

你的注册函数中，userRef.set()未加入Promise链式调用，可能导致异步操作未完成就执行后续逻辑，修改如下：

return createUniqueReferralCode().then(newReferralCode => {
    console.log("Generated Unique Referral Code:", newReferralCode);
    const userRef = firebase.firestore().doc('users/' + userId);
    // 加入return，确保用户文档写入完成后再执行邀请码写入
    return userRef.set({
        email: email,
        referralsCount: 0
    }).then(() => {
        return firebase.firestore().collection('referralCodes').doc(newReferralCode).set({
            ownerId: userId
        });
    });
});

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