如何为React Navigation Error屏幕配置TypeScript自定义路由参数

问题出在你的路由参数类型定义错误：NavigatorScreenParams是用于嵌套导航场景的类型，而你的Error是独立屏幕，不需要使用它，直接定义参数结构即可。

步骤1：修正路由参数类型定义 #

修改RootStackParamList中Error的类型，去掉多余的NavigatorScreenParams，直接指定参数结构：

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

export type RootStackParamList = {
  Root: undefined;
  // 直接定义Error屏幕的参数类型
  Error: {
    statusCode: number;
    description: string;
  } | undefined;
  Notifications: undefined;
  Log: undefined;
};

export type RootStackScreenProps<Screen extends keyof RootStackParamList> = NativeStackScreenProps<
  RootStackParamList,
  Screen
>;

// 若无需嵌套导航，可删除多余的ErrorParamList
// export type ErrorParamList = {
//   Error: {
//     statusCode: number;
//     description: string;
//   };
// };

如果想保留类型复用，也可以单独定义参数类型再引用：

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

// 单独定义Error屏幕的参数类型
export type ErrorScreenParams = {
  statusCode: number;
  description: string;
};

export type RootStackParamList = {
  Root: undefined;
  Error: ErrorScreenParams | undefined;
  Notifications: undefined;
  Log: undefined;
};

export type RootStackScreenProps<Screen extends keyof RootStackParamList> = NativeStackScreenProps<
  RootStackParamList,
  Screen
>;

步骤2：优化组件内参数获取（可选） #

由于route.params可能为undefined，可以添加默认值避免潜在报错：

export default function ErrorScreen({ route, navigation }: RootStackScreenProps<'Error'>) {
  // 给参数设置默认值，处理params为undefined的情况
  const { statusCode = 500, description = '未知错误' } = route.params || {};
  
  const { setClientURL } = appState(({ setClientURL }) => ({
    setClientURL,
  }));
  // ...其他逻辑
}

原因说明 #

NavigatorScreenParams的作用是标记嵌套导航器的参数列表（比如TabNavigator作为Stack的某个屏幕时），你的Error是单个独立屏幕，使用这个类型会让TypeScript错误地将参数识别为嵌套导航的结构，而非你定义的statusCode和description。

内容的提问来源于stack exchange，提问作者razor7