Formik错误传递至组件时出现TypeScript类型不兼容问题

问题描述 #

将Formik的错误信息传递给自定义ErrorMessage组件时，遇到TypeScript类型错误：

Type 'string | string[] | FormikErrors | FormikErrors[]' is not assignable to type 'string'. Type 'string[]' is not assignable to type 'string'.

相关代码 #

PlainInput组件：

export default function PlainInput({ type, placeholder, name, formik }: Props) {
  return (
    <>
      <input
        type={type}
        value={formik.values[name] || ""}
        name={name}
        onChange={(e: ChangeEvent<HTMLInputElement>) => {
          formik.setFieldValue(name, e.target.value);
        }}
      />
      <ErrorMessage text={formik.errors[name]} />
    </>
  );
}

ErrorMessage组件：

import React from "react";

type Props = {
  text: string ;
};

export default function ErrorMessage({ text }: Props) {
  return <p className="">{text}</p>;
}

注：运行时打印typeof(formik.errors[name])结果为string，但TypeScript仍提示类型错误。

原因分析 #

TypeScript的类型检查是编译时行为，而typeof是运行时判断。Formik的errors类型是泛型定义的默认联合类型（string | string[] | FormikErrors | FormikErrors[]），它无法在编译时确定你当前表单字段的错误具体类型，因此会抛出类型不兼容的错误。

解决方案 #

1. 类型断言（快速适配，需确保运行时类型为string） #

如果能明确当前字段的错误只会是字符串类型，可以直接用类型断言告诉TypeScript：

<ErrorMessage text={formik.errors[name] as string} />

2. 兼容数组类型错误（更健壮） #

若字段可能返回数组形式的错误（比如数组字段的验证场景），可以在传递前将数组转为字符串：

const errorText = Array.isArray(formik.errors[name]) 
  ? formik.errors[name].join(', ') 
  : formik.errors[name] || '';

<ErrorMessage text={errorText} />

3. 扩展ErrorMessage组件的类型支持 #

修改ErrorMessage的Props类型，使其兼容字符串和数组，内部统一处理显示逻辑：

import React from "react";

type Props = {
  text: string | string[];
};

export default function ErrorMessage({ text }: Props) {
  const displayText = Array.isArray(text) ? text.join(', ') : text;
  return <p className="">{displayText}</p>;
}

4. 使用Formik内置的ErrorMessage组件（推荐） #

Formik官方提供了内置的ErrorMessage组件，无需自定义，自动处理类型和渲染逻辑：

import { ErrorMessage } from 'formik';

// 在PlainInput组件中替换自定义组件
<ErrorMessage name={name} component="p" />

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