使用TypeScript在next.js中使用Router的安全方法

Question

next.js建议使用以下模式来访问路由参数：

const Page = withRouter((props) => (
  <p>{props.router.query.title}</p>
))

现在的问题是，在TypeScript中，上面的代码将显示错误，因为router并且query可能未定义。必须将其重写为

props.router!.query!.title

或作为

props.router && props.router.query && props.router.query.title

我认为这两种方法都是不好的。在第一个例子中，我们只是强迫编译器忽略该错误，而在其他情况下，则使代码带有不必要的噪音。

有没有更好的方法来访问路线参数？

Answer 1

有一个关于 JavaScript 中可选链的提案，但似乎需要一段时间才能最终确定。

props.router!.query!.title您避免忽略类型检查错误是正确的。您必须按照您的建议有条件地检查现有属性：props.router && props.router.query && props.router.query.title

我通常创建一个辅助函数来接受一个对象并从中获取嵌套属性。或者更好的是，您可以使用现有的库，例如lodash get：

import get from 'lodash/get'

...
const title = get(props, ['router', 'query', 'title'])
...