@mui/material Autocomplete搭配react-hook-form出现Typescript错误如何修复？

错误根因 #

TS报错的核心原因是measuringSystem字段的类型不匹配：你定义的Autocomplete组件接收的value只能是MeasuringSystemOption对象或者undefined，但你在表单默认值里给找不到匹配选项的情况兜底了空字符串''，string类型和预期的对象类型冲突，触发了类型校验报错。

具体修复方案 #

1. 修正默认值兜底逻辑
   你开启了Autocomplete的disableClearable属性，说明该字段永远有有效值，不需要空字符串兜底，直接给默认选项即可：

// 找到匹配的用户选项，找不到就默认选第一个（可根据业务需求调整默认值）
const defaultSystem = measuringSystemOptions.find(
  opt => opt.value === currentUser?.measuringSystem
) ?? measuringSystemOptions[0];

2. 修改表单默认值配置
   给useForm加上泛型明确字段类型，移除原来的空字符串兜底：

const {
  control,
  handleSubmit,
  formState: { errors },
  reset,
} = useForm<DefaultValues>({
  resolver: yupResolver(validationSchema),
  mode: 'onSubmit',
  reValidateMode: 'onBlur',
  defaultValues: {
    firstName: currentUser?.firstName ?? '',
    lastName: currentUser?.lastName ?? '',
    measuringSystem: defaultSystem, // 无需兜底空字符串
    address1: currentUser?.address1 ?? '',
    address2: currentUser?.address2 ?? '',
    city: currentUser?.city ?? '',
    state: currentUser?.state ?? '',
    country: currentUser?.country ?? '',
  },
});

3. 修正useEffect里的reset逻辑
   移除空字符串兜底和多余的any类型断言：

useEffect(() => {
  const resetUser = {
    firstName: currentUser?.firstName ?? '',
    lastName: currentUser?.lastName ?? '',
    address1: currentUser?.address1 ?? '',
    address2: currentUser?.address2 ?? '',
    city: currentUser?.city ?? '',
    state: currentUser?.state ?? '',
    country: currentUser?.country ?? '',
    measuringSystem: defaultSystem,
  };
  if (currentUser) reset(resetUser);
}, [currentUser]);

4. （可选）如果业务允许该字段初始无值
   调整DefaultValues接口的字段定义，再给Autocomplete的value补充类型收敛即可：

interface DefaultValues {
  // 其他字段保持不变
  measuringSystem?: MeasuringSystemOption; // 改为可选类型
}

// Controller渲染部分补充类型断言
render={({ field }) => (
  <Autocomplete
    {...field}
    value={field.value as MeasuringSystemOption | undefined}
    // 其他属性保持不变
  />
)}

内容的提问来源于stack exchange，提问作者J. Jackson