解决TypeScript中useFormState调用的No overload matches this call错误

核心问题分析 #

你遇到的错误本质是useFormState要求传入的函数必须严格遵循(prevState: S, formData: FormData) => Promise<S>的签名——即函数接收前一次的状态和表单数据，返回同类型状态的Promise。之前的注册函数要么没正确处理prevState参数，要么返回值类型和状态类型不匹配，导致TypeScript报错。

分步解决方案 #

1. 定义明确的状态类型

先把表单状态和错误结构的类型明确下来，对应后端返回的错误格式：

// 对应后端返回的字段错误列表（比如email字段的错误数组）
type RegistrationErrors = Record<string, string[]>;

// 表单状态类型：包含错误信息和成功状态
type FormState = {
  errors?: RegistrationErrors;
  success?: boolean;
};

2. 调整注册函数符合useFormState签名

修改register函数，确保它接收prevState和FormData，并返回Promise<FormState>：

import { AxiosError } from 'axios';

async function register(prevState: FormState, formData: FormData): Promise<FormState> {
  try {
    // 发起注册请求，从formData中提取字段
    await axios.post('/api/register', {
      email: formData.get('email'),
      password: formData.get('password'),
    });

    // 注册成功，重置错误并标记成功
    return { success: true, errors: undefined };
  } catch (err) {
    // 类型守卫：确保是Axios请求错误
    if (err instanceof AxiosError) {
      // 假设后端返回的错误结构是 { errors: { email: [...], ... } }
      const backendErrors = err.response?.data?.errors as RegistrationErrors;
      return {
        ...prevState, // 保留之前的状态（比如输入的表单值，如果需要）
        errors: backendErrors,
        success: false,
      };
    }

    // 处理非Axios错误（比如网络断开）
    return {
      ...prevState,
      errors: { general: ['未知错误，请稍后重试'] },
      success: false,
    };
  }
}

3. 在组件中正确使用useFormState

现在可以安全地调用useFormState，并在表单中渲染错误列表：

import { useFormState } from 'react-dom';

function RegisterForm() {
  // 初始化状态：无错误，未成功
  const [state, formAction] = useFormState(register, { errors: undefined, success: false });

  return (
    <form action={formAction}>
      <div>
        <label>邮箱</label>
        <input type="email" name="email" required />
        {/* 渲染邮箱字段的错误列表 */}
        {state.errors?.email?.map((err, idx) => (
          <p key={idx} style={{ color: 'red' }}>{err}</p>
        ))}
      </div>
      <div>
        <label>密码</label>
        <input type="password" name="password" required />
        {/* 渲染密码字段的错误列表 */}
        {state.errors?.password?.map((err, idx) => (
          <p key={idx} style={{ color: 'red' }}>{err}</p>
        ))}
      </div>
      {/* 渲染全局错误 */}
      {state.errors?.general?.map((err, idx) => (
        <p key={idx} style={{ color: 'red' }}>{err}</p>
      ))}
      {/* 渲染成功提示 */}
      {state.success && <p style={{ color: 'green' }}>注册成功！</p>}
      <button type="submit">注册</button>
    </form>
  );
}

关键注意事项 #

• 必须保证register函数的输入（prevState）和输出类型完全一致，这是useFormState的强制要求
• 使用AxiosError类型守卫可以安全地获取后端返回的错误数据，避免TypeScript类型断言报错
• 如果后端返回的错误结构和示例不同，只需调整RegistrationErrors类型和backendErrors的赋值逻辑即可

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