React条件渲染表单组件TypeScript类型错误及可扩展方案咨询

我正在构建一个支持条件渲染的表单元素组件，目标是能随需求扩展支持更多表单元素。目前的FormElement组件可以根据传入的Formtype属性渲染input或textarea，通过RenderCorrectFormElement函数选择对应组件渲染。但现在遇到TypeScript类型问题：在input组件中使用{...props}时，因为props包含textarea的属性导致类型不兼容，具体是ref属性类型不匹配。求可扩展的正确类型定义方案。

相关代码 #

import {
  DetailedHTMLProps,
  InputHTMLAttributes,
  TextareaHTMLAttributes,
} from "react";
import { DeepMap, FieldError, FieldValues } from "react-hook-form";

type FormElementType<
  T extends FieldValues,
  R extends inputType | TextAreaType
> = {
  name: string;
  id: string;
  errors: Partial<DeepMap<T, FieldError>>;
  Formtype: "input" | "textArea";
} & Omit<R, "name" | "id">;

type inputType = {
  name: string;
  size: number;
} & Omit<
  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
  "size"
>;

type TextAreaType = {
  id: string;
  name: string;
  label: string;
  className?: string;
} & DetailedHTMLProps<
  TextareaHTMLAttributes<HTMLTextAreaElement>,
  HTMLTextAreaElement
>;

function FormElement<
  T extends FieldValues,
  R extends inputType | TextAreaType
>({ name, id, errors, Formtype, ...props }: FormElementType<T, R>) {
  function RenderCorrectFormElement() {
    switch (Formtype) {
      case "input":
        return <input type="text" name={name} id={id} {...props} />;
      case "textArea":
        return <textarea name={name} id={id} {...props} />;
    }
  }
  return <> {RenderCorrectFormElement()} </>;
}

错误信息 #

类型 '{ type: "text"; name: string; id: string; } & Omit<FormElementType<T, R>, "name" | "id" | "errors" | "Formtype">' 不能赋值给类型 'DetailedHTMLProps<InputHTMLAttributes, HTMLInputElement>'。
类型 '{ type: "text"; name: string; id: string; } & Omit<FormElementType<T, R>, "name" | "id" | "errors" | "Formtype">' 不能赋值给类型 'ClassAttributes'。
属性'ref'的类型不兼容。
类型 'FormElementType<T, R>["ref"] | undefined' 不能赋值给类型 'LegacyRef | undefined'。
类型 'R["ref"]' 不能赋值给类型 'LegacyRef | undefined'。
类型 'string | ((instance: HTMLInputElement | null) => void) | RefObject | ((instance: HTMLTextAreaElement | null) => void) | RefObject | null | undefined' 不能赋值给类型 'LegacyRef | undefined'。
类型 '(instance: HTMLTextAreaElement | null) => void' 不能赋值给类型 'LegacyRef | undefined'。
类型 '(instance: HTMLTextAreaElement | null) => void' 不能赋值给类型 '(instance: HTMLInputElement | null) => void'。
参数 'instance' 和 'instance' 的类型不兼容。
类型 'HTMLInputElement | null' 不能赋值给类型 'HTMLTextAreaElement | null'。
类型 'HTMLInputElement' 缺少类型 'HTMLTextAreaElement' 中的以下属性：cols, rows, textLength, wrap(2322)
(属性) JSX.IntrinsicElements.input: DetailedHTMLProps<InputHTMLAttributes, HTMLInputElement>

解决方案：关联表单类型与属性类型，实现类型安全的条件渲染 #

核心思路是让Formtype和对应的props类型强绑定，避免交叉属性导致的类型冲突，同时保留扩展能力。

1. 定义表单类型映射表

先创建类型映射，将表单类型字符串与对应HTML元素的属性类型关联，方便后续扩展：

import {
  DetailedHTMLProps,
  InputHTMLAttributes,
  TextareaHTMLAttributes,
} from "react";
import { DeepMap, FieldError, FieldValues } from "react-hook-form";

// 表单类型与对应属性的映射表
type FormTypeMap = {
  input: Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "name" | "id"> & { size: number };
  textArea: Omit<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "name" | "id"> & { label: string; className?: string };
};

// 提取所有支持的表单类型字面量
type FormType = keyof FormTypeMap;

2. 定义组件Props类型

通过泛型将Formtype与对应属性类型绑定，确保传入的props和表单类型严格匹配：

type FormElementProps<T extends FieldValues, F extends FormType> = {
  name: string;
  id: string;
  errors: Partial<DeepMap<T, FieldError>>;
  Formtype: F;
} & FormTypeMap[F];

3. 修改组件实现，添加类型守卫

用类型守卫确保渲染对应表单元素时，props类型完全匹配：

// 类型守卫：判断是否为input专属props
function isInputProps(props: FormTypeMap[keyof FormTypeMap]): props is FormTypeMap["input"] {
  return "size" in props;
}

// 类型守卫：判断是否为textarea专属props
function isTextAreaProps(props: FormTypeMap[keyof FormTypeMap]): props is FormTypeMap["textArea"] {
  return "label" in props;
}

function FormElement<T extends FieldValues, F extends FormType>({ name, id, errors, Formtype, ...props }: FormElementProps<T, F>) {
  function RenderCorrectFormElement() {
    switch (Formtype) {
      case "input":
        if (isInputProps(props)) {
          return <input type="text" name={name} id={id} {...props} />;
        }
        throw new Error("传入的props与input类型不匹配");
      case "textArea":
        if (isTextAreaProps(props)) {
          return <textarea name={name} id={id} {...props} />;
        }
        throw new Error("传入的props与textArea类型不匹配");
      default:
        // 扩展新表单类型时，此处会触发编译错误，提示未处理的类型
        const _exhaustiveCheck: never = Formtype;
        throw new Error(`不支持的表单类型：${_exhaustiveCheck}`);
    }
  }
  return <> {RenderCorrectFormElement()} </>;
}

扩展新表单元素的方式

如果要添加新的表单类型（如select），只需两步：

1. 在FormTypeMap中新增键值对，定义对应属性类型
2. 在RenderCorrectFormElement的switch中添加对应case和类型守卫（若需）

这种方案既解决了当前的ref类型不兼容问题，又保证了组件的可扩展性，TypeScript会在编译阶段严格校验表单类型与props的匹配关系。

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