如何在React路由Action中捕获Firebase认证错误并渲染到JSX

1. 修改Action函数，返回错误信息 #

在你的LoginAction里，捕获错误后返回包含错误信息的对象，同时处理密码不匹配的场景：

export async function LoginAction({ request }) {
  const formData = await request.formData();
  const email = formData.get('email');
  const password = formData.get('password');
  const confirmPassword = formData.get('confirmPassword');

  // 处理密码不匹配
  if (password !== confirmPassword) {
    return { error: '密码与确认密码不匹配' };
  }

  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    // 成功时返回用户信息（可选）
    return { user: userCredential.user };
  } catch (error) {
    // 根据Firebase错误码返回友好提示
    let errorMessage = '注册失败，请重试';
    switch (error.code) {
      case 'auth/email-already-in-use':
        errorMessage = '该邮箱已被注册';
        break;
      case 'auth/invalid-email':
        errorMessage = '邮箱格式无效';
        break;
      case 'auth/weak-password':
        errorMessage = '密码强度不足，至少需要6位字符';
        break;
      default:
        errorMessage = error.message;
    }
    return { error: errorMessage };
  }
}

2. 在组件中读取Action返回的错误并渲染 #

使用React Router提供的useActionData() hook，在登录组件中获取Action执行后的结果，然后渲染错误信息：

import { Form, useActionData } from 'react-router-dom';

export default function LoginPage() {
  const actionData = useActionData();

  return (
    <div className="login-container">
      <h2>注册账号</h2>
      {/* 渲染错误信息 */}
      {actionData?.error && (
        <div className="error-message" style={{ color: '#dc2626', marginBottom: '1rem' }}>
          {actionData.error}
        </div>
      )}
      <Form method="post">
        <div className="form-group">
          <label htmlFor="email">邮箱</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div className="form-group">
          <label htmlFor="password">密码</label>
          <input type="password" id="password" name="password" required />
        </div>
        <div className="form-group">
          <label htmlFor="confirmPassword">确认密码</label>
          <input type="password" id="confirmPassword" name="confirmPassword" required />
        </div>
        <button type="submit" className="submit-btn">注册</button>
      </Form>
    </div>
  );
}

原理说明 #

React Router的Action函数是路由级别的处理函数，执行后返回的数据会被useActionData() hook捕获。每次表单提交触发Action后，组件会自动重新渲染并拿到最新的返回值，不需要手动维护状态，完美解决了你不能在Action中使用useState的问题。

如果需要更全局的错误处理，也可以通过抛出错误（throw new Error(errorMessage)）并使用useRouteError()来捕获，但返回包含error字段的对象更灵活，能同时处理成功和失败的场景。

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