使用Zod、ZodObject和ZodType进行React表单验证时出现类型错误

问题原因 #

该类型错误通常由@hookform/resolvers、zod、react-hook-form三者版本不匹配导致类型定义冲突，或是类型推断逻辑出现偏差。

解决方案 #

1. 统一依赖版本 #

优先更新到兼容的最新版本，解决底层类型定义冲突：

npm install react-hook-form@latest @hookform/resolvers@latest zod@latest

（使用yarn/pnpm的话替换对应命令即可）

2. 简化类型定义写法 #

直接在useForm中使用z.infer<typeof formSchema>作为泛型参数，避免单独定义类型可能带来的推断误差：

import * as z from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

const formSchema = z.object({
  name: z.string().min(1),
});

export const StoreModal = () => {
  const storeModal = useStoreModal();
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: "",
    },
  });

  // 后续表单逻辑
  return <div>{/* 表单内容 */}</div>;
};

3. 临时类型断言（不推荐长期使用） #

若版本更新后仍有问题，可临时用类型断言跳过检查：

resolver: zodResolver(formSchema as z.ZodType),

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