如何为可动态渲染HTML元素的React组件的as prop定义TypeScript类型？

要正确定义as prop的类型，核心是让TypeScript能根据as指定的元素/组件自动推断对应的props规则，而非使用宽泛的string类型。以下是具体实现方案：

正确的类型定义与组件实现 #

import { forwardRef, type ElementType, type ReactNode, type ForwardedRef } from 'react';

// 定义组件基础props
interface BaseButtonProps {
  children: ReactNode;
  className?: string;
}

// 合并基础props与目标元素/组件的原生props，用泛型关联as的类型
type ButtonProps<C extends ElementType = 'button'> = BaseButtonProps & {
  as?: C;
} & Omit<React.ComponentPropsWithoutRef<C>, keyof BaseButtonProps>;

const Button = forwardRef(<C extends ElementType = 'button'>(
  { children, as: Component = 'button', className, ...props }: ButtonProps<C>,
  ref: ForwardedRef<React.ElementRef<C>>
) => {
  return (
    <Component ref={ref} className={className} {...props}>
      {children}
    </Component>
  );
});

关键改进点说明 #

• 用ElementType替代string：React.ElementType是React内置类型，涵盖所有HTML标签名（如'button'、'a'）和自定义组件类型，比单纯的string更精准，TypeScript能识别具体元素的props约束。
• 泛型绑定关联类型：通过泛型C将as的类型与组件的props、ref类型绑定，确保传入的props符合目标元素要求，ref也能匹配对应DOM元素类型（比如as="a"时，ref类型自动为HTMLAnchorElement）。
• 避免props类型冲突：用Omit排除目标元素props中与自定义props重复的字段（如children、className），同时保留目标元素的原生props（比如as="a"时可正常传入href）。

简化版实现 #

若无需拆分基础props，可直接合并类型：

import { forwardRef, type ElementType, type ReactNode } from 'react';

type ButtonProps<C extends ElementType = 'button'> = {
  children: ReactNode;
  className?: string;
  as?: C;
} & Omit<React.ComponentPropsWithoutRef<C>, 'children' | 'className'>;

const Button = forwardRef(<C extends ElementType = 'button'>(
  { children, as: Component = 'button', className, ...props }: ButtonProps<C>,
  ref: React.ForwardedRef<React.ElementRef<C>>
) => {
  return <Component ref={ref} className={className} {...props}>{children}</Component>;
});

你之前遇到的错误，本质是as设为string时，TypeScript无法推断Component对应的元素props，只能识别最基础的IntrinsicAttributes，而该类型不包含children属性（不同元素对children的支持规则不同）。通过上述类型定义，TypeScript能准确判断目标元素是否支持children，从而消除报错。

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