ローカルで記事表示しようとしたらエラー出てた

普段あんまローカル開発環境で表示確認しないのだけど(それはそれでどうなのかという話だけど)、久々に見たらエラー出てた。

error - SerializableError: Error serializing `.postData.desc` returned from `getStaticProps` in "/posts/[id]".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

undefined は JSON に serialize できないので null 使うか omit しろ(omit を調べたら「省略する」と出てきた)と言われている。

omit ってたしか TS の Utility Types に出てきたな……と思ったのでリンク貼っておこう。

【TypeScript】Utility Types をまとめて理解する - Qiita

Omit<T, K>で T から K というプロパティを除いた新たな型を作るやつ。この場合は「切り捨てる」のほうが意味が合ってるか。

で、undefined が返ってるとこってどこ……？と思って考えてたけど、returned from getStaticProps in "/posts/[id]"なのでここの getStaticProps を見てみる。

postData.descを serialize しようとしたときにエラーになったので、postDataの戻り値を見てみる。

random.tagucch.dev/posts.ts at main · tagucch/random.tagucch.dev

ここが戻り値だけど、descが optional chaining を使っているので undefined になりうる。

というか、この記事を書くまで「並び順を示す ASC/DESC」の desc だと思っていたので、postData.descって何……？並び順を指定した記憶はないんだけど……？と思っていたが、description の省略でした。命名が良くないね(というかすぐ気づけよという話ですね)

JSON は undefined を許容しないので null を返す必要があるため、null coalescing を使って評価が undefined の場合は null を返すように修正した。