TypeScript React：泛型组件类型的Props推断问题

你的问题核心在于当前的_styled函数没有用泛型捕获传入组件/元素的具体类型，而是用了宽泛的ComponentType联合类型，导致TypeScript无法正确推断React.ComponentPropsWithRef的结果，最终props类型退化为any。

问题根源 #

你定义的ComponentType是包含所有原生元素和任意组件的联合类型，当把type参数标注为这个类型时，TypeScript会丢失传入值的具体类型信息（比如传入"div"时，类型会被收窄为ComponentType而非具体的"div"），进而让React.ComponentPropsWithRef<typeof type>无法解析出准确的Props类型。

解决方案：改用泛型函数 #

将_styled改为泛型函数，让TypeScript自动捕获传入的组件/元素的具体类型，再基于这个类型推导Ref和Props：

import React from 'react';

// 定义泛型参数C，约束为原生元素或React组件
function _styled<C extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(
  type: C
) {
  return React.forwardRef<
    React.ElementRef<C>, // 自动推导Ref的类型（原生元素实例/组件实例）
    React.ComponentPropsWithRef<C> // 自动推导组件的Props类型
  >((props, forwardedRef) => {
    return React.createElement(type, { ...props, ref: forwardedRef });
  });
}

验证效果 #

1. 原生元素场景：

const Text = _styled("div");
// Text组件的Props会自动推断为React.ComponentPropsWithRef<"div">
// 包含div的所有原生Props，ref类型为HTMLDivElement | null

2. 自定义组件场景：

interface CustomButtonProps {
  label: string;
  onClick?: () => void;
}

const CustomButton = ({ label, onClick }: CustomButtonProps) => (
  <button onClick={onClick}>{label}</button>
);

const StyledButton = _styled(CustomButton);
// StyledButton的Props会自动推断为CustomButtonProps & React.RefAttributes<HTMLButtonElement>
// 既保留自定义组件的Props，也支持ref传递

关键细节说明 #

• React.ElementRef<C>：自动处理原生元素（如"div"对应HTMLDivElement）和自定义组件（对应组件的实例类型）的Ref类型，替代你之前错误使用的React.RefAttributes<typeof type>。
• 泛型参数C会精准捕获传入的type的具体类型，让React.ComponentPropsWithRef能解析出准确的Props结构，避免类型退化为any。

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