使用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中有一个proposal for optional chaining，但似乎需要一段时间才能定稿。

您正确地避免了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'])
...

Answer 2

有一个 operator called optional chaining ?. 可以让您从对象链中读取值，而无需验证每个引用是否有效。它不会导致错误，而是返回 undefined。

所以你可以这样做：

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