Next.js/TypeScript表单提交失败：Zod验证image字段类型错误排查

1. 检查Zod Schema中image字段的定义 #

你大概率是把image字段定义成了字符串类型（z.string()），但文件上传的input[type="file"]返回的是File对象，类型不匹配直接触发验证失败；如果没选文件，还会触发必填错误。

修正示例：

• 若为必填单文件：

import { z } from "zod";

const ProductSchema = z.object({
  // 其他字段...
  image: z.instanceof(File, { message: "请选择有效的图片文件" }),
});

• 若为可选文件：

image: z.instanceof(File).optional().nullable(),

2. 修正表单文件输入的绑定逻辑 #

如果用react-hook-form，默认的register方法无法跟踪input[type="file"]的value，必须用Controller组件手动处理文件对象：

错误写法：

<input type="file" {...register("image")} />

正确写法：

import { Controller, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { ProductSchema } from "./schema";

// 组件内初始化表单
const { control, handleSubmit, formState: { errors }, getValues } = useForm({
  resolver: zodResolver(ProductSchema),
});

// 表单中的文件输入控件
<Controller
  name="image"
  control={control}
  render={({ field }) => (
    <input
      type="file"
      onChange={(e) => field.onChange(e.target.files?.[0])}
    />
  )}
/>
{errors.image && <p className="text-red-500">{errors.image.message}</p>}

3. 确认提交按钮的类型 #

提交按钮必须设置type="submit"，否则点击只会触发普通点击事件，不会触发表单的onSubmit：

错误写法：

<button type="button">提交</button>

正确写法：

<form onSubmit={handleSubmit(onSubmit, onInvalid)}>
  {/* 表单内容 */}
  <button type="submit">提交</button>
</form>

4. 排查默认行为阻止问题 #

确保没有在表单或按钮的事件处理函数中意外调用e.preventDefault()，这会阻断表单的默认提交流程，导致onSubmit无法执行。

5. 打印数据验证细节 #

在onInvalid中打印完整错误和表单数据，确认image字段的实际值：

const onInvalid = (errors) => {
  console.log("验证错误详情:", errors);
  console.log("当前表单数据:", getValues());
};

如果image字段显示undefined或null，说明绑定逻辑没有正确获取到文件对象，回到步骤2检查代码。

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