Next.js中Shadcn Form+React Hook Form+Zod Resolver表单无法提交

核心问题：提交按钮未设置type="submit" #

你的提交按钮未指定type="submit"属性，默认情况下按钮的type为button，不会触发表单的onSubmit事件。修改Button组件：

<Button size="lg" disabled={isLoading} type="submit">
  {initialData ? "Edit your companion" : "Create your companion"}
  <Wand2 className="w-4 h-4 ml-2" />
</Button>

额外校验问题排查 #

如果修复按钮后仍无法提交，检查以下几点：

• categoryId默认值不匹配Zod规则：默认值里categoryId: undefined，但Zod要求为string类型，修改默认值为空字符串：

  defaultValues: initialData || {
    name: "",
    description: "",
    instructions: "",
    seed: "",
    src: "",
    categoryId: "", // 替换undefined
  },
  

• ImageUpload组件值同步问题：确认ImageUpload组件的onChange正确将值传递给field.onChange，否则src字段为空会触发Zod校验失败，导致表单无法提交。可临时通过console.log(form.watch('src'))确认值是否正确更新。
• 表单校验状态查看：添加代码查看表单的校验错误，确认是否存在隐藏的校验失败：

  const { errors } = form.formState;
  console.log("Form Errors:", errors);
  

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