【React Navigation】もう画面遷移で落とさない！TypeScriptで100%型安全にする実装ガイド

結論です。各スタックの「画面名→パラメータ」の対応表（ParamList）を型で定義し、それをNavigatorとフックに渡す。これだけで navigate も route.params も型安全になります。

React Navigationは「どの画面にどんなパラメータが渡るか」を型で知りません。こちらがParamListを教えない限り、すべてany扱いになります。だから存在しない画面名もパラメータの抜けも検出できないのです。

まず画面とパラメータの対応を型で書きます。パラメータがない画面はundefinedにします。

// navigation/types.ts
export type RootStackParamList = {
  Home: undefined;                 // パラメータなし
  Detail: { id: string };          // idが必須
  Edit: { id: string; mode?: 'new' | 'update' };
};

この型をジェネリクスでNavigatorに渡します。

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { RootStackParamList } from './types';

const Stack = createNativeStackNavigator<RootStackParamList>();

// 存在しない画面名やtypoはここでエラーになる
<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Detail" component={DetailScreen} />
</Stack.Navigator>

画面側は NativeStackScreenProps を使うと、navigationとrouteの両方が一度に型付けされます。

import { NativeStackScreenProps } from '@react-navigation/native-stack';
import { RootStackParamList } from '../navigation/types';

type Props = NativeStackScreenProps<RootStackParamList, 'Detail'>;

function DetailScreen({ route, navigation }: Props) {
  const { id } = route.params;     // id: string として補完される

  return (
    <Button
      title="編集"
      onPress={() => navigation.navigate('Edit', { id })}
    />
  );
}

propsを受け取らない深い子コンポーネントでは、フックにジェネリクスを渡します。

import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { RootStackParamList } from '../navigation/types';

const navigation =
  useNavigation<NativeStackNavigationProp<RootStackParamList>>();

const route = useRoute<RouteProp<RootStackParamList, 'Detail'>>();

毎回ジェネリクスを書くのが面倒なら、declare globalでデフォルト型を登録すると、引数なしのuseNavigation()でも型が効きます。

// types/navigation.d.ts
import { RootStackParamList } from '../navigation/types';

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

Recommended

学んだことは、ブログに書くと一番定着する

エンジニアのアウトプット先として、表示速度の速いConoHa WINGでブログを始めました。月額わずか、最短10分で開設できます。

▶ ConoHa WINGでブログを始める

※ アフィリエイトリンクです