Next.js 14 TypeScript中React Hook Form Zod验证报错求助

问题原因 #

你的TS错误源于errors.category.message的类型不确定——React Hook Form的错误对象在嵌套字段场景下，message可能是FieldError对象或嵌套错误结构，而非单纯字符串，导致无法直接作为React节点渲染。

修复方案 #

方案1：类型守卫确保是字符串 #

在渲染前判断message是否为字符串，避免类型不兼容：

{errors.category?.message && (
  <p>{typeof errors.category.message === 'string' ? errors.category.message : ''}</p>
)}

方案2：类型断言快速修复 #

如果能确定该字段的错误只会返回字符串消息，可直接用类型断言：

{errors.category?.message && <p>{errors.category.message as string}</p>}

方案3：正确配置表单类型（推荐） #

确保表单的Zod Schema和React Hook Form的类型绑定正确，让TS自动推断错误类型：

import { z } from 'zod';
import { useForm, zodResolver } from '@hookform/resolvers/zod';

// 定义表单校验Schema
const FormSchema = z.object({
  category: z.string().min(1, '分类不能为空'),
  // 其他表单字段...
});

// 推导表单值类型
type FormValues = z.infer<typeof FormSchema>;

// 初始化表单时指定类型并绑定resolver
const { register, handleSubmit, formState: { errors } } = useForm<FormValues>({
  resolver: zodResolver(FormSchema),
});

这样配置后，errors.category?.message会被TS正确推断为string | undefined，无需额外处理即可直接渲染。

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