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

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

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

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