TypeScript中React懒导入组件的包装函数类型如何定义？

问题场景 #

我是TypeScript新手，想统一用React.Suspense包装多个文件中的懒导入组件，写了以下代码：

通用懒导入.ts文件 #

import Loadable from './Loadable'
import { lazy } from 'react'

const WrappedComponent = Loadable(lazy(() => import('path/to/my/component')));

// 使用示例：
// return <WrappedComponent />

Loadable.tsx文件 #

import React, { Suspense } from 'react';
import Loader from './Loader';

const Loadable = (child: JSX.Element) => (props: object) => {
    const Component = child;
    return (
        <Suspense fallback={<Loader />}>
            <Component {...props} />
        </Suspense>
    );
}

export default Loadable;

遇到两个TypeScript错误：

1. 参数类型不匹配：

Argument of type 'LazyExoticComponent<() => Element>' is not assignable to parameter of type 'Element'.
const WrappedComponent = Loadable(lazy(() => import('path/to/my/component')));

2. 组件无法调用：

JSX element type 'Component' does not have any construct or call signatures.
<Component {...props} />

解决方案 #

问题核心是参数类型定义错误：lazy()返回的不是JSX.Element（组件实例），而是React.LazyExoticComponent<React.ComponentType<any>>（懒加载的组件类型）。同时props用object类型过于宽泛，应该用React内置的类型规范定义。

修改后的Loadable.tsx：

import React, { Suspense, LazyExoticComponent, ComponentType } from 'react';
import Loader from './Loader';

// 泛型适配不同组件的props类型，保留类型检查
const Loadable = <P extends object>(Component: LazyExoticComponent<ComponentType<P>>) => {
  return (props: P) => (
    <Suspense fallback={<Loader />}>
      <Component {...props} />
    </Suspense>
  );
}

export default Loadable;

类型说明 #

• LazyExoticComponent<ComponentType<P>>：明确参数是React懒加载返回的组件类型，ComponentType<P>表示接收props为P类型的组件
• 泛型<P extends object>：让Loadable函数适配不同组件的props类型，获得精准的类型提示

修改后即可解决原有类型错误，同时保留TypeScript的类型校验能力。

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