React中如何优雅展示Firebase认证的简洁错误信息？

你可以通过错误码映射表或者正则提取简洁文本的方式，避免大量if/else判断，同时得到友好的错误提示。

方法一：基于错误码的映射表（推荐） #

Firebase Auth的错误对象自带code属性（比如auth/wrong-password），这个属性比message更稳定，不会随版本或本地化变动。我们可以创建一个映射表，将错误码直接对应到自定义的友好提示。

示例代码 #

import { useState } from 'react';
import { signInWithEmailAndPassword, getAuth } from 'firebase/auth';

const LoginForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const auth = getAuth();

  // 自定义错误提示映射表，可根据需求扩展
  const authErrorMap = {
    'auth/user-not-found': '未找到该用户，请检查邮箱是否正确',
    'auth/wrong-password': '密码错误，请重新输入',
    'auth/invalid-email': '邮箱格式不正确',
    'auth/email-already-in-use': '该邮箱已被注册',
    'auth/weak-password': '密码强度不足，至少需要6位字符',
    'auth/user-disabled': '该账号已被禁用',
    'auth/too-many-requests': '请求过于频繁，请稍后再试',
  };

  const handleLogin = async (e) => {
    e.preventDefault();
    setError('');
    try {
      await signInWithEmailAndPassword(auth, email, password);
      // 登录成功逻辑：比如跳转首页、更新用户状态
    } catch (err) {
      // 优先使用映射表的提示，无匹配则用默认提示
      const friendlyMessage = authErrorMap[err.code] || '登录失败，请稍后重试';
      setError(friendlyMessage);
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="邮箱"
        required
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="密码"
        required
      />
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button type="submit">登录</button>
    </form>
  );
};

export default LoginForm;

方法二：正则提取简洁文本 #

如果不想维护映射表，可以用正则表达式去掉Firebase: Error(auth/...)前缀，直接提取核心错误描述。

示例代码 #

在捕获错误时替换文本：

catch (err) {
  // 去掉前缀，保留后面的核心提示
  const cleanMessage = err.message.replace(/^Firebase: Error \(auth\/.*\)\.?\s*/, '');
  setError(cleanMessage || '未知错误');
}

这种方式不需要提前定义所有错误场景，但缺点是依赖Firebase错误信息的格式，如果未来Firebase修改message格式，可能会失效。

混合方案（兼顾稳定性和灵活性） #

可以结合两种方法，优先用映射表，映射表没有匹配到的错误码，再用正则提取文本：

catch (err) {
  const friendlyMessage = authErrorMap[err.code] 
    || err.message.replace(/^Firebase: Error \(auth\/.*\)\.?\s*/, '') 
    || '操作失败，请稍后重试';
  setError(friendlyMessage);
}

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