React高阶组件(HOC)报错：类型'(props: any) => JSX.Element'不可分配给类型'ReactNode'

嘿，我来帮你搞定这个问题！

你遇到的这个类型错误其实很好理解：React Router v6 的 <Route> 组件的 element 属性要求传入的是已经渲染好的 JSX 元素（也就是 ReactNode 类型），但你的 withSuspense 返回的是一个 React 组件函数——它是一个能生成 JSX 的函数，而不是直接的 JSX 结果，所以类型自然不匹配啦。

给你两个简单直接的解决方案：

方案一：先定义包装后的组件，再渲染 #

先把目标组件用你的 HOC 包装成一个新组件，然后在 Route 的 element 里用 JSX 语法渲染这个新组件：

// 先创建被Suspense包裹好的MessagesPage组件
const SuspensedMessagesPage = withSuspense({ Component: MessagesPage, Fallback: Loader });

// 然后在Route中使用
<Route
  path="messages"
  element={<SuspensedMessagesPage />}
/>

方案二：直接在element内渲染包装后的组件 #

如果不想单独定义变量，也可以直接在 element 属性里把 HOC 返回的组件当作 JSX 组件来使用：

<Route
  path="messages"
  element={<withSuspense({ Component: MessagesPage, Fallback: Loader }) />}
/>

另外，顺便帮你优化一下 HOC 的 TypeScript 类型（别再用 any 啦，类型严谨点更省心）：

import { Suspense, ComponentType } from 'react';

// 定义HOC接收的props类型
type WithSuspenseProps = {
  Component: ComponentType;
  Fallback: ComponentType;
};

export const withSuspense = ({ Component, Fallback }: WithSuspenseProps) => {
  // 支持传入原组件的props类型
  return function SuspensedComponent<T extends Record<string, unknown>>(props: T) {
    return (
      <Suspense fallback={<Fallback />}>
        <Component {...props} />
      </Suspense>
    );
  };
};

这样调整后，不仅解决了类型错误，还让你的 HOC 类型更安全，后续维护也更方便～

备注：内容来源于stack exchange，提问作者Roman