React注册页：提取Firebase错误信息并去除前缀的方法

快速解决方法 #

直接在渲染错误消息时，对err.message做字符串替换来移除前缀：

修改你代码里显示错误的那一行：

{err && <span>{err.message.replace('Firebase: ', '')}</span>}

这能立刻把Firebase: Password should be at least 6 characters (auth/weak-password).转换成Password should be at least 6 characters (auth/weak-password).，简单直接。

更可控的进阶方案（推荐） #

如果想自定义更友好的提示语，或者避免Firebase消息格式变动带来的问题，可以根据错误码code来映射自定义消息：

1. 先定义一个错误消息映射对象：

const errorMessages = {
  "auth/weak-password": "密码长度至少需要6位",
  "auth/email-already-in-use": "该邮箱已被注册",
  "auth/invalid-email": "请输入有效的邮箱地址",
  // 可根据需求添加更多错误码对应的提示
};

2. 调整你的错误渲染逻辑：

// 把useState初始值改为null
const [err, setErr] = useState(null);

// catch块保持不变，依然用setErr(err);

// 渲染错误时
{err && (
  <span>
    {errorMessages[err.code] || err.message.replace('Firebase: ', '')}
  </span>
)}

这种方式既能自定义常用错误的友好提示，又能在没有自定义的情况下自动移除前缀，兼容所有错误场景。

针对你代码的完整修改示例 #

修改后的Register组件关键部分：

const Register = () => {
  const [err, setErr] = useState(null);
  const navigate = useNavigate();

  const errorMessages = {
    "auth/weak-password": "密码长度至少需要6位",
    "auth/email-already-in-use": "该邮箱已被注册",
    "auth/invalid-email": "请输入有效的邮箱地址",
  };

  // handleSubmit函数保持不变...

  return (
    <div className='formContainer'>
        <div className='formWrapper'>
            <span className="logo">Trust Yoav</span>
            <span className="title">Register</span>
            <form onSubmit={handleSubmit}>
                <input type="text" placeholder="display name"/>
                <input type="email" placeholder="email"/>
                <input type="password" placeholder="password"/>
                <input style={{display:"none"}} type="file" id="file"/>
                <label htmlFor="file" >
                    <span>Add an avater:</span>
                    <img style={{ width: 32, cursor: 'pointer'}} src={Add} alt="" />
                </label>
                <button>Sign Up</button>
                {err && (
                  <span>
                    {errorMessages[err.code] || err.message.replace('Firebase: ', '')}
                  </span>
                )}
            </form>
            <p>已有账号？<Link to="/login">登录</Link></p>
        </div>
    </div>
  );
};

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