React中Firebase注册表单报错后无法重新提交问题排查

你的问题根源很明确：当Firebase返回邮箱已存在等错误时，你只弹出了错误提示，但没有把禁用的提交按钮重新启用，同时还有一处错误状态的赋值问题，导致后续无法提交。

具体问题点 #

• 在createUserWithEmailAndPassword的catch块中，未调用setSubmitBtnDisabled(false)，按钮一直处于disabled状态，用户点击无效
• 你用setErrorMessage("")试图清空错误，但errorMessage是包含show和msg的对象，直接赋值字符串会破坏状态结构

修复步骤 #

1. 错误处理时重置按钮状态

在catch块末尾添加setSubmitBtnDisabled(false)，确保无论哪种错误，按钮都能恢复可用：

.catch((error) => {
  if (error.code === "auth/email-already-in-use") {
    showError(true, "The email address is already in use");
  } else if (error.code === "auth/invalid-email") {
    showError(true, "The email address is not valid.");
  } else if (error.code === "auth/operation-not-allowed") {
    showError(true, "Operation not allowed.");
  } else if (error.code === "auth/weak-password") {
    showError(true, "The password is too weak.");
  } else {
    showError(true, error.message);
  }
  // 关键：重置按钮禁用状态
  setSubmitBtnDisabled(false);
  return;
});

2. 修复错误状态的清空逻辑

把setErrorMessage("")替换成showError(false)，利用你封装的showError函数统一管理错误状态：

// 原错误代码
setErrorMessage("");
// 替换为
showError(false);

3. 优化Alert组件的移除逻辑（可选）

Alert组件中调用removeError()时，明确传递参数让逻辑更清晰：

useEffect(() => {
  const timeout = setTimeout(() => {
    removeError(false);
  }, 3000);
  return () => clearTimeout(timeout);
}, [removeError]);

修改后的完整submitHandler函数 #

const submitHandler = (event) => {
  event.preventDefault();
  if (!userName || !Password || !email || !confirmPassword) {
    showError(true, "Fill all the fields")
    return;
  }
  if (Password !== confirmPassword) {
    showError(true,"Password field not matches" )
    return;
  }
  showError(false); // 修复错误状态清空
  setSubmitBtnDisabled(true);
  createUserWithEmailAndPassword(auth, email, Password)
    .then(async (userDetails) => {
      setSubmitBtnDisabled(false);
      const user = userDetails.user;
      await updateProfile(user, {
        displayName: userName,
      });
      navigate("/home");
    })
    .catch((error) => {
      if (error.code === "auth/email-already-in-use") {
        showError(true, "The email address is already in use");
      } else if (error.code === "auth/invalid-email") {
        showError(true, "The email address is not valid.");
      } else if (error.code === "auth/operation-not-allowed") {
        showError(true, "Operation not allowed.");
      } else if (error.code === "auth/weak-password") {
        showError(true, "The password is too weak.");
      }else{
        showError(true, error.message)
      }
      setSubmitBtnDisabled(false); // 重置按钮状态
      return;
    });
};

修改完成后，当用户输入已注册邮箱报错，更换新邮箱后，按钮会恢复可用，表单就能正常提交了。

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