使用shadcn FormField组件时遭遇TypeScript类型兼容问题

• 封装基于shadcn FormField的可复用TextInput组件时，按文档把FormField返回的field传给Input，报TS错误：Type 'foo' is not assignable to type 'InputProps'
• 根因：field.value可能是string或者整个location对象，但Input只认string、number这类基础类型
• 父组件MeetUpForm里，location的子字段（比如country、state）全用了name="location"，这直接加重了类型不匹配的问题
• 查过shadcn和react-hook-form的文档，试过Controller组件，还是没解决

1. 先改父组件的字段命名（最关键） #

别再给所有location子字段用name="location"了，必须用嵌套字段名，比如：

// MeetUpForm里的写法要改成这样
<TextInput
  label="Country"
  name="location.country" // 用嵌套路径，不是直接写"location"
/>
<TextInput
  label="State"
  name="location.state"
/>

这么改之后，react-hook-form会正确识别每个子字段的类型，field.value就会是单个基础类型（比如string），而不是整个location对象，类型不匹配的根源就解决了一大半。

2. 给TextInput加精准的类型约束 #

通过泛型限定FormField和Input的类型匹配，避免TS报错：

// TextInput.tsx的示例代码
import { FormField, FormFieldProps } from "@/components/ui/form"
import { Input, InputProps } from "@/components/ui/input"

// 定义组件props，限定value为Input支持的基础类型
type TextInputProps<T extends string | number | undefined> = Omit<FormFieldProps<T>, "children"> & {
  label: string
}

export function TextInput<T extends string | number | undefined>({ label, ...props }: TextInputProps<T>) {
  return (
    <FormField<T> {...props}>
      {({ field }) => (
        <div className="space-y-2">
          <label>{label}</label>
          {/* 处理可能的undefined情况，确保value符合Input的要求 */}
          <Input 
            {...field} 
            value={field.value ?? ""} 
          />
        </div>
      )}
    </FormField>
  )
}

这里用泛型T把field.value限定为Input能接受的类型，同时用?? ""处理初始值为空的情况，避免undefined类型报错。

3. 要是用Controller，得用对姿势 #

如果某些场景必须用Controller，一定要配置正确的name和render函数：

// 父组件里用Controller的正确写法
import { Controller } from "react-hook-form"

<Controller
  name="location.country" // 还是嵌套字段名
  control={control}
  render={({ field }) => (
    <TextInput label="Country" {...field} />
  )}
/>

Controller会把对应子字段的string类型value传给TextInput，不会再传整个location对象。

4. 检查表单初始值的类型 #

确保MeetUpForm的初始值里，location是包含所有子字段的对象，比如：

const defaultValues = {
  // 其他字段...
  location: {
    country: "",
    state: "",
    // 其他location子字段都要初始化
  }
}

react-hook-form会根据初始值推断字段类型，避免类型推断错误。

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