React中signInWithEmailAndPassword的FirebaseError无法被try/catch捕获

你遇到的问题是signInWithEmailAndPassword抛出的auth/wrong-password错误无法被try/catch或.catch捕获，导致应用崩溃。以下是排查和解决的关键点：

1. 检查登录函数的调用方式 #

如果你的表单提交处理函数（handleSubmit）是同步调用login，没有处理它返回的Promise，可能会导致未捕获的Promise rejection。修改handleSubmit为异步函数，确保完整处理异步流程：

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    await login({ email, password });
  } catch (err) {
    // 兜底处理任何未被login内部捕获的异常
    console.error("登录流程出错:", err);
  }
};

2. 确认错误对象的结构 #

有时Firebase返回的错误对象可能存在属性访问问题，尝试在catch中打印完整错误对象，验证code属性的存在：

catch (error) {
  console.log("捕获到错误详情:", error);
  if (error?.code === "auth/wrong-password") {
    console.log("密码不正确，请重新输入");
  } else {
    console.log("登录失败:", error.message || "未知错误");
  }
}

3. 排除Firebase日志干扰 #

Firebase默认会在控制台输出Auth相关的错误日志，这只是日志信息，不一定代表应用崩溃。如果应用真的崩溃，检查是否存在全局错误监听（比如window.unhandledrejection事件）或React错误边界未正确包裹组件的情况。

4. 升级Firebase版本 #

旧版本的Firebase Auth可能存在异步错误捕获的兼容性问题，尝试升级到最新稳定版本：

npm install firebase@latest

5. 排查登录成功后的逻辑 #

虽然你提到正确密码时流程正常，但可以暂时注释掉登录成功后的处理代码（// ...部分），测试是否是后续逻辑抛出的错误导致崩溃。

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