AstroコンポーネントのProps定義が反映されない場合の解決法の一つ

起こった問題

Astroのコードブロック内でPropsという型を定義すると、そのファイル内で使う外部から渡される値を定義できます（ドキュメント）。

動的ルーティングで用いるgetStaticPathsと組み合わせることも可能で、以下のように使えます。

type Props = InferGetStaticPropsType<typeof getStaticPaths>;

export async function getStaticPaths() {
  ...
  return {
    params: { slug: entry.id },
    props: { entry, next, prev },
  };
}

const { entry } = Astro.props;

ドキュメントにはこの定義を自動で検出して利用できると書かれていますが、このPropsの定義がVSCode上で反映されないということがありました。

解決法

もとのコードは、getStaticPathsの定義を受けてPropsを定義することを意識して

export async function getStaticPaths() { ... }

type Props = InferGetStaticPropsType<typeof getStaticPaths>;

のように書いていました。
これを冒頭のコードのように、Propsの定義をgetStaticPathsより上に持っていくと検出が機能しました。

はっきりと理由を分析したわけではありませんが、async/awaitによりコードの流れが変化することが関係していると思われます。
別のコンポーネントでも、await文を伴う関数呼び出しより前にPropsを定義するように変更したところ正しく認識されるようになりました。
awaitは以降のコードをコールバックに包むので、Propsの定義をも包んでしまうのかもしれませｎ。

まとめ

Propsの定義がエディタ等に検出されない場合、定義をasync/awaitの使用より先に持っていくと正しく検出される場合があるようです。