React 18中Suspense辅助组件报错问题（React 17可正常运行）

问题场景 #

在React Router的React应用中，原React 17版本使用以下代码定义路由：

<Route exact path={Paths.landing} component={Awaiting(starWars)} />

对应的Awaiting辅助组件代码为：

import React, { Suspense } from "react";

function Awaiting<T>(Component: React.ComponentType<T>) {
    return (props: T) => (
        <Suspense fallback={null}>
            <Component {...props} />
        </Suspense>
    );
}
export default Awaiting;

升级到React 18后，抛出多个类型错误：

'Suspense' refers to a value, but is being used as a type here. Did you mean 'typeof Suspense'?

Cannot find name 'fallback'
Operator '>' cannot be applied to types '{ null: any; }' and 'number'

错误原因 #

核心问题是TypeScript对泛型函数与后续JSX标签的解析歧义：原代码中Awaiting<T>的泛型尖括号紧跟在函数名后，后续的<Suspense>被TS错误解析为泛型相关语法，而非JSX组件。同时React 18对类型定义的严格性提升，加剧了这类解析问题。

修正后的代码 #

方案1：使用箭头函数定义泛型组件（推荐） #

箭头函数的泛型写法能避免TS的解析歧义，同时类型推导更清晰：

import React, { Suspense } from "react";

const Awaiting = <T extends Record<string, unknown>>(Component: React.ComponentType<T>) => {
  return (props: T) => (
    <Suspense fallback={null}>
      <Component {...props} />
    </Suspense>
  );
};

export default Awaiting;

方案2：在泛型尖括号后添加逗号 #

通过添加逗号明确告诉TS这是泛型定义，而非JSX标签的开始：

import React, { Suspense } from "react";

function Awaiting<T,>(Component: React.ComponentType<T>) {
  return (props: T) => (
    <Suspense fallback={null}>
      <Component {...props} />
    </Suspense>
  );
}

export default Awaiting;

额外注意（React Router v6用户） #

如果你的项目同时升级到了React Router v6，原component属性已被废弃，需要改用element：

<Route path={Paths.landing} element={<Awaiting(starWars) />} />

关键修改说明 #

• 泛型写法调整：解决TS将泛型尖括号与JSX标签混淆的解析错误，消除"Suspense被当作类型"和运算符错误
• 类型约束：添加extends Record<string, unknown>或空对象约束，确保泛型T符合组件props的类型规范
• fallback属性：null是React 18中Suspense fallback的合法值，无需修改，若需自定义加载状态，直接传入ReactNode类型的内容即可

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