React17+TS搭配React Router Dom v5使用match对象报错如何解决

• 第一处问题是你在类型定义中给match属性加了可选标识?，TypeScript会默认判定该值可能为undefined，你后续直接访问match.url时没有做非空校验，就触发了TS的空值检查报错。
• 第二处问题是你对match的泛型使用不符合规则：React Router v5的match类型的泛型参数是路由参数的键值对对象类型，比如你的路由是/detail/:id，那么泛型应该写match<{id: string}>，而不是直接传入基础类型string，无路由参数的场景可以写match<Record<string, string>>或者直接省略泛型。

根据你的实际使用场景选择对应方案即可：

1. 如果你确定该组件一定是被Route组件直接渲染（也就是作为Route的component、render、children属性的传入组件），那么match属性一定会被路由自动注入，不需要设置为可选，直接修改接口定义即可：

interface DetailsProps {
  match: match<Record<string, string>>;
}

2. 如果该组件可能在非路由场景下复用，需要保留match的可选属性，那么使用时增加非空判断即可：

• 方案A：使用可选链运算符直接访问

<Route path={`${match?.url}`} render={() => <Component/>} />

• 方案B：提前做空值拦截，后续所有对match的访问都会被TS判定为非空

const Routing: React.FunctionComponent<DetailsProps> = (props: DetailsProps) => {
  const match = props.match;
  // 空值直接返回，或者做其他兜底处理
  if (!match) return null;

  return <Route path={`${match.url}`} render={() => <Component/>} />
}

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