React中Firebase电话认证结合reCAPTCHA时的超时问题

阿华AIGC实验室

2026-4-14

看起来你已经做了不少基础工作——加了超时处理、reCAPTCHA重置逻辑，但还是碰到了短信发出去却超时的问题，我来帮你梳理几个可能的原因和解决办法：

1. 先排查reCAPTCHA初始化的正确性

你的resetRecaptcha函数是关键，很多超时问题都出在这里。确保它正确销毁旧实例并创建新的Verifier，比如：

const resetRecaptcha = () => {
  // 先清除旧的reCAPTCHA实例，避免冲突
  if (window.recaptchaVerifier) {
    window.recaptchaVerifier.clear();
  }
  // 重新创建实例，绑定到页面上存在的DOM容器（比如id为recaptcha-container的div）
  window.recaptchaVerifier = new RecaptchaVerifier(auth, 'recaptcha-container', {
    size: 'invisible',
    callback: (response) => {
      console.log("reCAPTCHA验证通过，响应：", response);
    },
    'expired-callback': () => {
      console.log("reCAPTCHA已过期，重新初始化");
      resetRecaptcha();
    }
  });
};

必须确保页面上有一个存在且未被隐藏的DOM元素（比如<div id="recaptcha-container"></div>），reCAPTCHA需要挂载到这个元素上，哪怕是invisible尺寸。
检查expired-callback是否正确触发，避免使用过期的reCAPTCHA实例。

2. 去掉Promise.race先做基础测试

你当前用Promise.race加了2分钟超时，但可能signInWithPhoneNumber本身在发送短信后应该很快返回confirmationResult，超时可能是因为这个Promise没有正常resolve。先临时注释掉Promise.race，直接调用：

const confirmationResult = await signInWithPhoneNumber(auth, phoneNumber, appVerifier);

然后看控制台日志：

如果能正常返回confirmationResult，说明之前的超时是因为signInWithPhoneNumber的响应确实慢（比如网络波动），可以保留Promise.race但适当延长超时时间（比如3分钟）。
如果一直pending不resolve，那问题出在signInWithPhoneNumber的前置条件，比如reCAPTCHA验证没真正通过，或者Firebase配置有问题。

3. 检查Firebase的基础配置

授权域名：在Firebase控制台的「Authentication」→「登录方法」→「电话」里，确认你的开发域名（比如http://localhost:3000）已经添加到「授权域名」列表里，否则Firebase会拒绝请求。
电话号码格式：打印你拼接后的phoneNumber（比如+8210xxxxxxx），确认没有多余的空格、短横或其他特殊字符，Firebase对号码格式要求很严格。

Firebase SDK版本与初始化：确保你用的SDK版本是稳定版，且auth对象初始化正确：

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

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

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

4. 避免用window存储敏感状态

你把confirmationResult存在window上，在React单页应用里容易出现状态丢失（比如组件重新挂载、路由跳转后），建议用组件内部的useRef或者全局状态管理（比如Context、Redux）来存储：

在Sign_up.js里用useRef：

const confirmationResultRef = useRef(null);

// 发送验证码后
confirmationResultRef.current = confirmationResult;

如果是跨组件传递（比如到Number.js），可以把状态提升到父组件，或者用Context包裹两个组件，通过Context传递confirmationResult。

5. 确认阶段的优化

你的verifyCode函数用window.confirmationResult也有同样的全局变量问题，建议和上面一样用状态传递。另外，调用confirm时可以加日志，确认是否触发了超时：

const verifyCode = async () => {
  if (!inputValue.trim()) {
    alert("Please enter the verification code.");
    return;
  }

  try {
    console.log("开始验证验证码，confirmationResult是否存在：", Boolean(window.confirmationResult));
    const result = await Promise.race([
      window.confirmationResult.confirm(inputValue),
      new Promise((_, reject) =>
        setTimeout(() => reject(new Error("Verification timeout")), 180000)
      ),
    ]);
    alert("Verification successful!");
    // 处理用户信息...
  } catch (error) {
    console.error("验证错误详情：", error);
    alert("Verification failed. Please try again.");
  }
};