NextJS中Firebase短信多因素认证出现Uncaught (in promise) Timeout错误求助

这个超时错误并非你手动设置的30秒超时触发的（因为你已经成功登录），大概率是Firebase Auth内部未处理的异步操作异常，或者流程中遗漏了错误捕获步骤，以下是针对性的解决方案：

1. 确保完整捕获所有Auth异步操作的错误 #

你当前的代码只处理了verifyPhoneNumber的错误，但短信MFA是完整的流程——从获取验证码、用户输入到最终完成登录，每一步的Promise都需要被catch覆盖。比如你可能在后续调用signInWithCredential或处理用户会话时，遗漏了错误捕获，导致内部超时错误暴露为未捕获异常。

修改后的完整流程示例：

import { getAuth, PhoneAuthProvider, PhoneMultiFactorGenerator, signInWithCredential } from "firebase/auth";

const handleMFA = async () => {
  const auth = getAuth();
  try {
    // 确认用户已完成第一因素认证（如邮箱/密码登录）
    const currentUser = auth.currentUser;
    if (!currentUser) throw new Error("请先完成基础登录");

    // 初始化Recaptcha（注意DOM元素需存在）
    const recaptchaVerifier = new RecaptchaVerifier("recaptcha-container", {}, auth);
    
    // 获取验证码
    const verificationId = await PhoneAuthProvider.verifyPhoneNumber(
      formattedPhoneNumber,
      recaptchaVerifier
    );

    // 用户输入验证码（这里替换成你的UI输入逻辑）
    const code = await getVerificationCodeFromUI();
    if (!code) throw new Error("未输入验证码");

    // 验证并完成MFA登录
    const phoneCredential = PhoneAuthProvider.credential(verificationId, code);
    const mfaAssertion = PhoneMultiFactorGenerator.assertion(phoneCredential);
    await signInWithCredential(auth, mfaAssertion);

    console.log("MFA登录成功");
  } catch (error) {
    // 统一捕获所有流程中的错误，包括超时
    console.error("MFA流程出错:", error);
    // 这里可以添加用户提示逻辑
  }
};

2. 处理Recaptcha Verifier的生命周期问题 #

在NextJS的组件环境中，Recaptcha Verifier绑定的DOM元素可能在组件卸载（比如登录成功后跳转页面）时被销毁，导致Firebase内部的异步请求中断触发超时。需要在组件卸载时主动销毁Verifier实例：

import { useEffect, useRef } from "react";
import { getAuth, RecaptchaVerifier } from "firebase/auth";

const MFALoginComponent = () => {
  const recaptchaVerifierRef = useRef(null);
  const auth = getAuth();

  useEffect(() => {
    // 初始化Verifier
    recaptchaVerifierRef.current = new RecaptchaVerifier("recaptcha-container", {}, auth);

    // 组件卸载时清理Verifier
    return () => {
      if (recaptchaVerifierRef.current) {
        recaptchaVerifierRef.current.clear();
      }
    };
  }, [auth]);

  // 后续使用recaptchaVerifierRef.current即可
};

3. 调整Firebase Auth的会话持久化设置 #

NextJS的SSR/SSG特性可能与Firebase默认的localStorage持久化冲突，导致内部会话同步操作超时。可以显式设置持久化方式为会话级：

import { getAuth, setPersistence, browserSessionPersistence } from "firebase/auth";

const auth = getAuth();
// 在初始化Auth后设置持久化
setPersistence(auth, browserSessionPersistence)
  .then(() => {
    // 后续的认证操作放在这里
  })
  .catch((err) => {
    console.error("设置持久化失败:", err);
  });

4. 不要忽略这个错误 #

绝对不能忽略该错误，它会破坏应用的错误处理机制，可能导致用户会话状态不稳定、Auth监听事件异常等隐性问题，必须通过上述方法彻底解决。

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