Shadcn Form报错：无法解构useFormContext的getFieldState属性

这个错误的核心原因是你在Shadcn的<Form>组件内部嵌套了原生<form>标签，破坏了react-hook-form的上下文传递，导致FormMessage等组件无法获取到表单上下文。

修复步骤： #

• 移除内部的原生<form>标签
• 将表单提交逻辑直接绑定到Shadcn的<Form>组件上

修改后的完整代码：

const formSchema = z.object({
  username: z.string(),
})

const form = useForm<z.infer<typeof formSchema>>({
  resolver: zodResolver(formSchema),
  defaultValues: {
    username: "",
  },
});

// 表单结构
<Form {...form} onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
  <FormField
    control={form.control}
    name="username"
    render={({ field }) => (
      <FormItem>
        <FormLabel>User Name</FormLabel>
        <FormControl>
          <Input {...field} />
        </FormControl>
        <FormMessage />
      </FormItem>
    )}
  />
  <Button type="submit">Submit</Button>
</Form>

补充说明： #

Shadcn的<Form>组件已经封装了react-hook-form的FormProvider和原生form元素的功能，不需要额外嵌套原生form。所有依赖表单上下文的组件（如FormField、FormMessage）必须直接放在Shadcn <Form>的内部，才能正确获取上下文。

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