Next.js中useActionState结合Server Action的TypeScript错误求助

安全阿岳

2026-6-15

解决Next.js中useActionState与Server Action的TypeScript类型不匹配问题

错误原因

useActionState在组件初始化时会自动调用传入的Server Action函数，仅传递初始状态作为第一个参数；而你的signIn函数要求第二个formData参数为必填项，导致TypeScript检测到函数签名不匹配。

解决方案

方法1：将formData参数设为可选并处理初始化场景

修改Server Action的函数签名，把formData设为可选参数，并在函数开头处理formData不存在的情况（对应初始化调用）：

"use server";

// ... 保留原有导入代码

export default async function signIn(
  state: SignInFormInitialState,
  formData?: FormData // 改为可选参数
): Promise<SignInFormInitialState> {
  // 初始化调用时直接返回当前状态
  if (!formData) {
    return state;
  }

  // 原有业务逻辑保持不变
  const username = String(formData.get("username"));
  const password = String(formData.get("password"));

  const validatedFields = signInSchema.safeParse({
    username,
    password,
  });

  if (!validatedFields.success) {
    return {
      username,
      password,
      errors: validatedFields?.error?.flatten()?.fieldErrors,
    };
  }

  // ... 后续用户查询、登录请求、cookie设置等逻辑
}

方法2：显式指定useActionState的泛型参数

在组件中调用useActionState时，明确指定状态类型和Payload类型（FormData），帮助TypeScript正确推断函数签名：

// 在SignInForm组件中修改useActionState调用
const [state, formAction, pending] = useActionState<SignInFormInitialState, FormData>(
  signIn,
  initialState
);