TypeScript泛型报错：参数类型无法赋值给never，React数组更新函数怎么修复

错误根源 #

1. 参数类型不匹配：handleUpdateArray的value参数定义为FormState[T]，但实际调用时传入的是数组的单个元素（比如'male'），而FormState[T]是数组类型，直接导致类型冲突。
2. 联合类型数组的类型窄化问题：TypeScript无法自动将form[key]的联合类型（('small'|...)[] | ('male'|...)[]）窄化为具体的数组类型，使得includes和filter的类型签名无法兼容。

修复后的完整代码 #

type FormState = {
  size: Array<'small' | 'medium' | 'large' | 'xlarge'>;
  gender: Array<'male' | 'female'>;
};

const [form, setForm] = useState<FormState>({
  size: ['small', 'medium', 'large', 'xlarge'],
  gender: ['male', 'female']
});

function handleUpdateArray<T extends 'size' | 'gender'>(
  key: T,
  value: FormState[T][number] // 修改：value为数组元素类型，而非数组本身
): void {
  // 提取当前数组，让TypeScript自动窄化类型
  const currentArray = form[key];
  const isEnabled = currentArray.includes(value);

  const newValue = isEnabled
    ? currentArray.filter((val) => val !== value)
    : [...currentArray, value];

  setForm((prevForm) => ({
    ...prevForm,
    [key]: newValue
  }));
}

// 调用方式保持不变
handleUpdateArray<'gender'>('gender', 'male');

关键修改说明 #

• 修正value的类型：将value: FormState[T]改为value: FormState[T][number]，FormState[T][number]表示取对应数组的元素类型，比如当T为'gender'时，该类型就是'male' | 'female'，和调用时传入的单个元素完全匹配。
• 提取当前数组变量：把form[key]赋值给currentArray后，TypeScript会根据key的泛型类型自动窄化currentArray的具体类型，比如key为'gender'时，currentArray会被识别为('male'|'female')[]，这样includes和filter就能正常调用，不会再出现联合类型的签名冲突。

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