如何解决Formik组件中的TypeScript类型错误？

问题根源 #

你的Input组件的ref类型被错误定义为HTMLSelectElement，但实际它是HTMLInputElement，导致Formik传递的input ref无法匹配，触发类型不兼容错误。

修复步骤 #

1. 修正input.tsx的类型定义 #

找到Input组件中ref相关的类型声明，把HTMLSelectElement替换为HTMLInputElement：

// input.tsx
import { forwardRef, InputHTMLAttributes } from 'react';

// 自定义Input属性，继承输入框的原生属性
type InputProps = InputHTMLAttributes<HTMLInputElement> & {
  // 你的自定义属性（比如额外样式、状态等）
};

// 修正ref的泛型类型为HTMLInputElement
const Input = forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => {
  return (
    <input
      ref={ref}
      className="你的ShadCN样式类"
      {...props}
    />
  );
});

Input.displayName = 'Input';

2. 确保TextInputField.tsx的Formik集成类型正确 #

在和Formik结合时，直接传递useField返回的field属性即可，现在ref类型会自动匹配：

// TextInputField.tsx
import { useField } from 'formik';
import { Input } from './input';

type TextInputFieldProps = {
  name: string;
  label: string;
};

export const TextInputField = ({ name, label }: TextInputFieldProps) => {
  const [field, meta] = useField(name);
  
  return (
    <div>
      <label htmlFor={name}>{label}</label>
      <Input id={name} {...field} />
      {meta.touched && meta.error && <span className="text-red-500">{meta.error}</span>}
    </div>
  );
};

3. 排查潜在的类型混淆点 #

• 检查InputProps是否错误继承了SelectHTMLAttributes，必须改成InputHTMLAttributes<HTMLInputElement>
• 确认没有其他全局类型别名或组件，错误地将input元素的ref标注为select类型

验证修复 #

重新编译项目，TS2322错误应该会消失。如果仍有问题，逐行检查ref的传递链路，确保所有环节的类型统一为HTMLInputElement。

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