泛型函数组件类型不兼容：如何正确合并类型并解决TS报错？

问题核心分析 #

当前错误的根源有两点：

1. ppr函数的泛型T无类型约束，TypeScript无法确认传入的{element: ComponentType<any>} & typeof props能赋值给任意T，因此抛出类型不兼容错误。
2. PassPropertiesAndRender的泛型设计未关联组件属性与element的类型，既导致类型不安全，也让TypeScript无法正确推导类型关系。

修正后的完整代码 #

import React from "react";
import { Outlet, useLocation, useNavigate, useParams } from "react-router-dom";
import Bootstrap, { iBootstrapProperties, iBootstrapState } from "src/Bootstrap";
import { Location } from "history";
import { NavigateFunction } from "react-router";

interface WithRouter {
    location: Location;
    navigate: NavigateFunction;
    params: any
}

export type iAmBootstrapDescendant = iBootstrapState & iBootstrapProperties & WithRouter;

// 调整泛型关联，明确element对应组件与属性的类型关系
function PassPropertiesAndRender<ComponentProperties>(
    props: ComponentProperties & { element: React.ComponentType<ComponentProperties & iAmBootstrapDescendant> }
) {
    const Component = props.element;
    const bootstrap = Bootstrap.bootstrap;
    const location = useLocation();
    const navigate = useNavigate();
    const params = useParams();
    console.info(Component.displayName || Component.name, { location, navigate, params });

    return <Component 
        {...bootstrap.props}
        {...bootstrap.state}
        location={location}
        navigate={navigate}
        params={params}
        {...props}
    >
        <Outlet />
    </Component>;
}

PassPropertiesAndRender.displayName = 'PassPropertiesAndRender';

// 约束ppr的泛型与参数，确保类型推导正确
export const ppr = <T = {}>(
    Element: React.ComponentType<T & iAmBootstrapDescendant>,
    props: Partial<T> = {}
) => <PassPropertiesAndRender<T> element={Element} {...props} />;

export default ppr

关键修改说明 #

1. 关联泛型与组件类型：
   将PassPropertiesAndRender的element属性类型从ComponentType<any>改为ComponentType<ComponentProperties & iAmBootstrapDescendant>，确保传入的组件能接受合并后的所有属性（自定义props + bootstrap属性 + 路由属性），同时让TypeScript能检查属性兼容性。

2. 约束ppr的泛型与参数：

   • 给ppr的泛型T设置默认值{}，代表组件的自定义属性类型。
   • 约束Element为接受T & iAmBootstrapDescendant的组件，确保组件能处理所有传递的属性。
   • 将props的类型设为Partial<T>，允许传入部分自定义属性，同时符合TypeScript的类型推导规则。

3. 简化结构：
   移除冗余的iPPR接口，直接将element属性定义整合到PassPropertiesAndRender的props类型中，简化结构并增强类型关联。

错误根源补充 #

原代码中ppr调用<PassPropertiesAndRender<T>>时，T可以是任意类型（如string、number），但传入的{element: ..., ...props}显然无法赋值给任意类型T，因此TypeScript抛出错误。通过给T添加明确约束（组件的自定义属性类型），并让PassPropertiesAndRender的props类型与T关联，即可解决类型不兼容问题。

内容的提问来源于stack exchange，提问作者Richard Tyler Miles