Next.js 14中Server Actions表单action类型错误问题求助

错误成因 #

你定义的submit是普通异步函数，没有标记为Next.js的Server Action。TypeScript默认认为表单的action属性只能接收字符串类型，无法识别未标记的函数为合法的Server Action类型，因此抛出类型不匹配错误。

解决步骤 #

• 标记Server Action：在函数内部最顶部添加'use server'指令，明确告诉Next.js这是一个服务器动作。修改后的代码：

async function submit(formData: FormData) {
  'use server';
  // 你的函数实现逻辑
}

如果是把Server Actions集中在单独文件中，也可以将'use server'放在文件顶部，这样文件内所有函数都会被识别为Server Actions。

• 检查组件环境：如果submit函数是在客户端组件（带'use client'指令的组件）里定义的，必须将其移到服务器组件或单独的Server Actions文件中，客户端组件只能导入使用Server Actions，不能直接定义。

• 确认TypeScript配置：确保tsconfig.json的compilerOptions中target设置为ES2017或更高版本，且strict模式开启（Next.js默认配置已满足此要求，若自定义过配置需检查）。

内容的提问来源于stack exchange，提问作者Pablo C. García