React Hook Form Controller中value.includes触发never类型TS错误求助

这个错误的核心原因是TypeScript无法推断Controller中value的类型，默认将其判定为never，导致无法调用includes方法。以下是具体修复步骤：

1. 定义表单值类型接口 #

首先明确整个表单的结构，假设每个分类对应的选中值是字符串数组：

interface FormValues {
  // 如果你的分类是固定枚举值，可替换为具体键名，比如 electronics: string[]
  [category: string]: string[];
}

2. 给Controller指定泛型类型 #

在Controller组件上添加<FormValues>泛型，让TypeScript明确字段值的类型：

<Controller<FormValues>
  control={control}
  name={`${category}` as const}
  render={({ field: { value, onChange } }) => (
    <Stack gap={1.5}>
      {filterObj?.[category as keyof typeof filterObj]?.map((item) => (
        <Checkbox
          onChange={() => {
            // 优化onChange逻辑，处理value为undefined的情况
            onChange(prev => {
              const current = prev || [];
              return current.includes(item) 
                ? current.filter(v => v !== item) 
                : [...current, item];
            });
          }}
          checked={(value || []).includes(item)}
          label={item}
          key={item}
        />
      ))}
    </Stack>
  )}
/>

3. 可选：给filterObj明确类型（增强类型安全） #

如果filterObj的类型不明确，可定义其类型：

type FilterObj = {
  [key: string]: string[];
};

// 假设你的filterObj数据结构如下
const filterObj: FilterObj = {
  electronics: ["手机", "电脑"],
  clothing: ["上衣", "裤子"]
};

关键说明 #

• 未指定泛型时，React Hook Form无法推断字段值类型，导致value被判定为never；
• 使用(value || [])处理value为undefined的边界情况，避免空值调用includes；
• 函数式更新（onChange(prev => ...)）比直接操作value更可靠，尤其是在异步或动态字段场景下。

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