【React Native】React Navigationで遷移時に受け渡すパラメータに型を設定する方法

JavaScriptで書かれたReact NativeアプリをTypeScriptへ変換しているのですが、その際にReactNavigation（v5）で画面遷移を実装している箇所に型を定義する際に躓いたのでその時の設定方法を載せておきます。

以下は公式ドキュメントをなぞって実装しています。
https://reactnavigation.org/docs/typescript/

Navigator (Router)の設定

まずは画面を管理しているファイルに型を定義します。（プロジェクトによって異なると思いますが、私の場合はRouter.tsx)

// 受け渡すパラメータの型定義
export type RootStackParamList = {
  News: { // 画面名
    userId: string; // 受け渡すパラメータの型を定義
  };
};

// 型を伝える
const Stack = createStackNavigator<RootStackParamList>();

画面側の設定

今度は宣言した型定義を画面側に受け取れるようにします。

画面のソースファイルにStackScreenPropsをインポートしておきます。

import { StackScreenProps } from '@react-navigation/stack';

画面名を指定してRouterで設定した型定義を取得する

type NewsPageNavigationProp = StackScreenProps<
  RootStackParamList,// 画面とパラメータの定義を呼び出し
  'News'// 画面名を設定
>;

// Pageのコンポーネントに型定義を追加
const NewsPage: React.FC<NewsPageNavigationProp> = ({
  navigation,
  route,
}: NewsPageNavigationProp) => {
// userIdにはstringの型推論が確認できる
  const { userId } = route.params; 
  ...省略

まとめ

困ったときはまず公式ドキュメントですね。
ReactNavigationは実装方法を細かく書いてくれてるので助かりました。

参考資料

https://reactnavigation.org/docs/typescript/