React Router Config中HOC的TypeScript类型错误解决咨询

你完全说对了！这个错误的根源就是RouteConfigComponentProps里的route属性是可选的（看类型定义里的route?: RouteConfig，问号表示该属性可能为undefined）。TypeScript在严格模式下不允许你直接访问一个可能为undefined值的属性，所以当你尝试直接解构route: { routes }时，它会报错说routes不存在于RouteConfig | undefined类型上。

下面给你几种安全的解决方式，按推荐程度排序：

方法1：使用可选链+空值合并运算符（最推荐） #

这种方式既安全又简洁，能同时处理route为undefined或者route.routes为undefined的情况：

import React from "react";
import { renderRoutes, RouteConfigComponentProps } from "react-router-config";

export const injectRoutes = (WrappedComponent: React.ComponentType<any>) => 
  ({ route, ...props }: RouteConfigComponentProps) => {
    // 如果route不存在，或者route.routes不存在，就用空数组作为默认值
    const routes = route?.routes ?? [];
    return <WrappedComponent {...props}>{renderRoutes(routes)}</WrappedComponent>;
  };

• route?.routes：可选链运算符，只有当route不为undefined时才会访问routes，否则返回undefined
• ?? []：空值合并运算符，当左边的值为undefined或null时，返回右边的空数组

方法2：给解构参数设置默认值 #

你也可以在解构的时候给route和routes都设置默认值，确保它们永远有有效值：

import React from "react";
import { renderRoutes, RouteConfigComponentProps } from "react-router-config";

export const injectRoutes = (WrappedComponent: React.ComponentType<any>) => 
  ({ route = {}, ...props }: RouteConfigComponentProps) => {
    // 从route中解构routes，默认是空数组
    const { routes = [] } = route;
    return <WrappedComponent {...props}>{renderRoutes(routes)}</WrappedComponent>;
  };

这里route = {}确保即使route是undefined，我们也有一个空对象可以解构；routes = []则保证routes永远是数组类型，符合renderRoutes的参数要求。

方法3：非空断言（不推荐，仅在你100%确定route不会为undefined时使用） #

如果你能保证在使用这个HOC的场景中，route永远不会是undefined，可以用非空断言运算符!告诉TypeScript忽略route为undefined的情况：

import React from "react";
import { renderRoutes, RouteConfigComponentProps } from "react-router-config";

export const injectRoutes = (WrappedComponent: React.ComponentType<any>) => 
  ({ route, ...props }: RouteConfigComponentProps) => {
    // 注意：只有当你绝对确定route不会为undefined时才用这个！
    const routes = route!.routes ?? [];
    return <WrappedComponent {...props}>{renderRoutes(routes)}</WrappedComponent>;
  };

警告：如果运行时route真的是undefined，这会导致Cannot read properties of undefined (reading 'routes')的错误，所以除非你完全掌控这个HOC的使用场景，否则不要用这种方式。

你的路由配置本身是没问题的，只是TypeScript的严格类型检查要求我们处理所有可能的边界情况——这也是TypeScript帮我们避免潜在运行时错误的核心价值之一。

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