ReactJS中如何用TypeScript实现lazy懒加载（附报错解决示例）

问题原因 #

React.lazy 要求传入的加载函数必须返回一个 Promise，且该 Promise 最终解析的结构必须是 { default: ComponentType<any> }（即默认导出 React 组件的 ES 模块结构）。你当前的 pageLoader 工具函数没有定义正确的类型约束，TypeScript 无法推断其返回值符合 React.lazy 的要求，因此抛出类型不匹配错误。

修复方案 #

直接修改 pageLoader 工具函数的类型定义即可，修改后的完整代码如下：

import i18n from "i18n";
import { ComponentType } from "react";

// 定义导入模块的类型结构
type ImportComponentModule = Promise<{ default: ComponentType<any> }>

export const pageLoader = (
  component: () => ImportComponentModule
) => {
  return () =>
    new Promise<{ default: ComponentType<any> }>((resolve, reject) => {
      component()
        .then((module) => resolve(module))
        .catch((error: object) => {
          alert(i18n.t("session_timeout_message"));
          window.location.href = `${process.env.REACT_APP_LOGOUT}`;
          reject(error);
        });
    });
};

改动说明 #

• 给入参 component 明确了类型：入参是返回组件模块 Promise 的函数，和 import() 语句的返回值类型完全匹配
• 给返回的 Promise 明确了泛型约束，直接符合 React.lazy 对入参的类型要求
• 删除了之前错误的 module: React.ReactNode 类型标注，import() 返回的是模块对象不是 React 节点，TS 现在可以自动推断正确类型

修改完成后原有调用 lazy(pageLoader(() => import("xxx"))) 的代码不需要做任何改动，类型报错会直接消失。

内容的提问来源于stack exchange，提问作者stuck.with.code