使用Bun时React TypeScript泛型高阶组件类型错误排查

1. 修正泛型约束，解决props兼容性问题 #

错误核心是你把WrappedComponent的props（类型T）直接传给了PopoverProvider，但T没有被约束为兼容PopoverProvider的props类型。你需要让T同时满足两个组件的props要求：

import type { ComponentType } from 'react';

// 获取PopoverProvider的props类型
type PopoverProviderProps = React.ComponentProps<typeof PopoverProvider>;

export const withPopover = <T extends PopoverProviderProps>(WrappedComponent: ComponentType<T>) => {
    const displayName = WrappedComponent.displayName || WrappedComponent.name || "Component";

    const ComponentWithProvider = (props: T) => {
        return (
            <PopoverProvider {...props}>
                <WrappedComponent {...props} />
            </PopoverProvider>
        );
    };

    ComponentWithProvider.displayName = `withPopover(${displayName})`;

    return ComponentWithProvider;
};

这样T被约束为PopoverProvider的props子集，确保传给PopoverProvider的props类型合法。

2. 解决IntrinsicAttributes引用问题 #

IntrinsicAttributes不需要单独导入，直接通过React.IntrinsicAttributes或React.JSX.IntrinsicAttributes引用即可。如果仍报错，检查：

• 执行bun add -D @types/react确保安装了React类型定义
• 确认@types/react版本与你的React版本匹配（比如React 18对应@types/react@18.x）

3. 可选：拆分props实现更灵活的组件解耦 #

如果WrappedComponent不需要PopoverProvider的所有props，可以拆分props，只传递Provider需要的部分：

import type { ComponentType } from 'react';

// 定义PopoverProvider必需的props结构
type PopoverRequiredProps = {
    // 替换为你实际需要的Provider props
    popoverPosition?: 'top' | 'bottom';
};

export const withPopover = <T>(WrappedComponent: ComponentType<T>) => {
    const displayName = WrappedComponent.displayName || WrappedComponent.name || "Component";

    // 高阶组件接收Provider必需props + WrappedComponent的props
    const ComponentWithProvider = (props: T & PopoverRequiredProps) => {
        // 拆分props，分离给两个组件的部分
        const { popoverPosition, ...restProps } = props;
        return (
            <PopoverProvider popoverPosition={popoverPosition}>
                <WrappedComponent {...restProps as T} />
            </PopoverProvider>
        );
    };

    ComponentWithProvider.displayName = `withPopover(${displayName})`;

    return ComponentWithProvider;
};

4. 检查Bun环境的TypeScript配置 #

确保tsconfig.json中配置了正确的React相关选项：

{
    "compilerOptions": {
        "jsx": "react-jsx",
        "types": ["react", "react-dom"]
    }
}

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