React JS使用Firebase Auth时catch语句无法捕获注册错误

• 自定义封装的signUp函数没有正确向外抛出Firebase接口返回的错误：如果signUp内部写了catch逻辑但没有重新throw错误，或者错误处理逻辑写得有问题，会导致外层try/catch无法接收到reject状态的Promise，错误直接抛到全局变成未捕获的Promise异常。
• 跳转逻辑存在闭包旧值问题：判断跳转用的err是函数执行瞬间的闭包缓存值，不是setErr更新后的最新状态值，哪怕错误捕获正常，这个判断逻辑也不符合预期。
• setTimeout参数写法不规范：第二个参数传入了数组[2000]，虽然JS隐式类型转换后会按2000毫秒执行，但属于非标准写法，容易引发隐性问题。

1. 先修正signUp封装，确保错误能正常向外层抛出，参考写法：

import { getAuth, createUserWithEmailAndPassword, updateProfile } from "firebase/auth";
const auth = getAuth();

const signUp = async (email, password, firstName, lastName) => {
  // 不要在这个函数内部单独写catch吞掉错误，让错误自然抛给上层调用方
  const userCred = await createUserWithEmailAndPassword(auth, email, password);
  // 用户名更新等后续逻辑正常编写，抛出的错误同样会向外传递
  await updateProfile(userCred.user, {
    displayName: `${firstName} ${lastName}`
  });
  return userCred.user;
};

2. 修正表单提交处理函数逻辑：

const submitHandler = async (e) => {
  e.preventDefault();
  setErr("");
  try {
    await signUp(email, password, firstName, lastName);
    // 能走到这一行说明注册成功没有报错，直接执行跳转即可，不需要额外判断err状态
    setTimeout(() => {
      navigate("/");
    }, 2000); // 延迟参数直接传数字类型，不要传数组
  } catch (error) {
    console.log(error.message);
    setErr(error.message);
  }
};

修复完成后，再提交已注册的邮箱时，catch块会正常捕获到auth/email-already-in-use对应的错误信息，页面能正常渲染错误提示，控制台也不会再出现未捕获的FirebaseError报错。

内容的提问来源于stack exchange，提问作者Kareem Magdy El-Zomor