React Hook Form传递嵌套字段至setValue的TypeScript错误解决

问题背景 #

在使用React Hook Form处理User类型表单时，传递顶层字段（如id、groupName）给自定义onChange函数能正常通过类型检查，但传递嵌套字段路径"profile.firstName"时，TypeScript抛出错误：

类型为'"profile.firstName"'的参数无法分配给类型为'keyof User'的参数。ts(2345)

尝试直接更新profile对象或整个表单对象时，也出现类型不匹配错误：

1. 更新profile对象时，错误提示{ firstName: string; ... }无法分配给string类型参数
2. 更新整个表单对象时，错误提示完整User对象无法分配给字段路径类型参数

错误原因 #

1. 自定义onChange函数的key参数类型被定义为keyof User，仅能识别User的顶层键，不支持嵌套字段的字符串路径格式。
2. React Hook Form的setValue本身支持嵌套字段路径，但自定义onChange的value参数固定为string，无法适配嵌套对象的更新场景。

解决方案 #

方案1：使用FieldPath类型约束字段路径 #

React Hook Form提供了FieldPath工具类型，可自动生成表单所有合法字段路径（包括嵌套字段），替换原有的keyof User即可解决类型错误：

import { useForm, FieldPath } from 'react-hook-form';

// ...

const { handleSubmit, setValue, watch } = useForm<User>();
// 用FieldPath<User>替代keyof User，支持所有嵌套字段路径
type FieldName = FieldPath<User>;

const onChange = (value: string, key: FieldName) => {
  setValue(key, value);
};

// 调用时直接传递嵌套路径
<Input onChange={(e) => onChange(e.target.value, 'profile.firstName')}>FirstName</Input>

方案2：直接调用setValue（简化写法） #

如果自定义onChange仅做简单封装，可直接在Input的onChange回调中调用setValue，省去中间函数的类型适配：

<Input onChange={(e) => setValue('profile.firstName', e.target.value)}>FirstName</Input>

方案3：适配嵌套对象更新的重载函数 #

若需要通过更新整个profile对象来修改嵌套字段，可通过函数重载让onChange支持两种参数类型：

import { useForm, FieldPath } from 'react-hook-form';

// ...

const { handleSubmit, setValue, watch } = useForm<User>();
type FieldName = FieldPath<User>;

// 重载onChange，支持字符串值更新顶层字段，或对象值更新profile字段
function onChange(value: string, key: Exclude<FieldName, 'profile'>): void;
function onChange(value: User['profile'], key: 'profile'): void;
function onChange(value: string | User['profile'], key: FieldName) {
  setValue(key as any, value);
}

// 使用示例：更新profile对象
<Input onChange={(e) => onChange({
  ...watch().profile,
  firstName: e.target.value
}, 'profile')}>FirstName</Input>

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