React HOC中泛型与显式类型冲突的类型错误排查

Type 'number[]' is not assignable to type 'string'.

问题复现 #

• 定义HOC实例：

const ComponentPage = renderPage(Component);

• 渲染组件时触发上述类型错误：

return <ComponentPage chaptersCompleted={chaptersCompleted} title="title" />

相关代码 #

类型定义 #

export type ChapterProps<T> = {
    [key: string]: T
}

export type PageProps = {
    chaptersCompleted: number[]
    animation?: 'fade' | 'slide' | 'instant'
}

高阶组件实现 #

export function renderPage<T>(Component: React.FC<ChapterProps<T>>) {
    return (props: PageProps & ChapterProps<T>) => {...}
}

目标组件 #

export function Component({title}: ChapterProps<string>) { ... }

现状说明 #

将泛型改为ChapterProps<any>可临时运行，但丢失类型安全。经排查，问题根源是PageProps的键被纳入泛型类型后，合并PageProps与带泛型的ChapterProps时出现类型冲突，需要实现“先排除PageProps键再合并类型”的逻辑。

解决方案 #

核心是利用TypeScript的Omit工具类型，让组件接收的Props排除PageProps已有的键，再与PageProps合并：

修改HOC实现 #

export function renderPage<T>(Component: React.FC<ChapterProps<T>>) {
    // 合并PageProps和排除了PageProps键的ChapterProps
    return (props: PageProps & Omit<ChapterProps<T>, keyof PageProps>) => {
        // 拆分属性，分离HOC专属属性和组件自身属性
        const { chaptersCompleted, animation, ...componentProps } = props;
        // 这里可添加HOC的业务逻辑，比如处理chaptersCompleted
        return <Component {...componentProps as ChapterProps<T>} />;
    };
}

优化类型约束（可选） #

如果想从根源避免冲突，可以直接修改ChapterProps的定义，默认排除PageProps的键：

export type ChapterProps<T> = Omit<{
    [key: string]: T
}, keyof PageProps>

这样调整后，ChapterProps<string>会自动排除chaptersCompleted和animation，合并类型时就不会出现冲突，同时完整保留类型校验能力。

内容的提问来源于stack exchange，提问作者mirja-t