reactjs - Null-säkert sätt att använda Router i next.js med TypeScript

next.js rekommenderar följande mönster för att få åtkomst till ruttparametrarna:

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

Nu är problemet att i TypeScript skulle koden ovan visa ett fel eftersom router och query kan vara undefined. Den måste skrivas om antingen som

props.router!.query!.title

eller som

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

Båda sätten är dåliga enligt min åsikt. I det första tvingar vi bara kompilatorn att ignorera felet och i det andra gör vi koden uppblåst med onödig brus.

Finns det ett bättre sätt att komma åt ruttparametrarna?

Svar #1

Det finns ett förslag om valfri kedjning i JavaScript, men det verkar som att det kommer ta ett tag innan det blir klart.

Du har rätt i att undvika props.router!.query!.title för att ignorera typkontrollfelen. Du skulle behöva kontrollera de befintliga egenskaperna villkorligt som du föreslog: props.router && props.router.query && props.router.query.title

Jag brukar skapa en hjälpfunktion för att ta emot ett objekt och hämta en inbäddad egenskap från det. Eller ännu bättre, du kan använda ett befintligt bibliotek som lodash get:

import get from 'lodash/get'

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

Svar #2

Det finns en operator som kallas valfri kedjning ?. som låter dig läsa värdet från en objektkedja utan att behöva kontrollera att varje referens är giltig. Istället för att orsaka ett fel kommer den att returnera undefined.

Så du kan göra:

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