React+Formik+TypeScript表单控件报错：string无法赋值给never类型

问题根源 #

你定义的FormikField类型里，field.value被设为[]，TypeScript会自动推断这个空数组的类型是never[]。当调用field.value.includes(option?.value)时，includes方法的参数要求是never类型，但option.value是string，因此触发类型不匹配错误。

修复方案 #

方案1：修正自定义FormikField类型 #

把field.value的类型从[]改为明确的字符串数组类型：

export type FormikField = {
  field: {
    name: string;
    onBlur: () => void;
    onChange: () => void;
    value: string[]; // 替换原有的[]
  }
};

方案2：使用Formik自带的FieldProps类型（推荐） #

直接导入Formik官方提供的FieldProps，避免自定义类型时出现偏差：

import { Field, ErrorMessage, FieldProps } from 'formik';
import { Fragment } from 'react';

// 移除自定义的FormikField类型，改用FieldProps
const Checkbox = (props: FormControlProps) => {
  const { name, label, options, ...rest } = props;

  return (
    <div className='form-control'>
      <label>{label}</label>
      <Field name={name} {...rest}>
        // 明确指定字段值为字符串数组类型
        ({field}: FieldProps<string[]>) => {
          console.log('field', field);
          
          return options?.map((option) => (
            <Fragment key={option.key}>
              <input 
                {...field} 
                type="checkbox" 
                id={option.value} 
                checked={field.value.includes(option.value)} 
                value={option.value}
              />
              <label htmlFor={option.value}>{option.key}</label>
            </Fragment>
          ))
        }
      </Field>
      <ErrorMessage name={name} component={TextError} />
    </div>
  );
};

方案3：给自定义FormikField添加泛型 #

如果需要保留自定义类型，可通过泛型适配不同的数组元素类型：

export type FormikField<T = string> = {
  field: {
    name: string;
    onBlur: () => void;
    onChange: () => void;
    value: T[];
  }
};

// 使用时指定泛型为string
({field}: FormikField<string>) => {
  // 剩余代码保持不变
}

额外注意点 #

• 确保Formik表单的初始值中，对应这个多选框的字段是string[]类型（比如initialValues: { yourCheckboxName: [] }），这样Formik会正确推断字段类型。
• 不要给options.value添加never/null这类类型，这会加剧类型匹配混乱，保持string类型即可。

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