升级React Native至0.72.3后Stack.Screen出现TypeScript类型错误

原因 #

升级后的react-navigation（尤其是v6+版本）对TypeScript类型检查的严谨性大幅提升，而你的Stack.Screen未与自定义的RootStackParamList做显式关联，导致它默认使用ParamListBase（空参数类型）。但你的Home组件明确依赖RootStackParamList中Home路由的参数类型，两者类型不匹配，触发了TypeScript错误。旧版本类型检查规则更宽松，允许这种隐式不兼容，因此之前未报错。

解决方案 #

1. 显式为Stack Navigator关联自定义ParamList #

创建Stack Navigator时，需指定基于你的RootStackParamList，确保所有Stack.Screen都遵循统一的类型体系：

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

// 确保RootStackParamList定义正确
type RootStackParamList = {
  Home: undefined; // 若Home路由无需参数则写undefined，有参数则替换为对应类型
  // 其他路由定义...
};

// 显式指定泛型为RootStackParamList
const Stack = createStackNavigator<RootStackParamList>();

2. 简化组件类型定义（推荐） #

无需手动指定FunctionComponent，直接通过StackScreenProps定义参数类型即可，React会自动推断组件的正确类型：

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

// 直接在组件参数上标注类型
const HomeScreen = ({ route }: StackScreenProps<RootStackParamList, 'Home'>) => {
  return (
    <Container>
      <BodyText>Home</BodyText>
    </Container>
  );
};

export default HomeScreen;

3. 确认RootStackParamList的路由定义 #

确保RootStackParamList中Home的参数类型与组件期望一致：若组件不需要路由参数，就设置为undefined，避免使用不匹配的类型。

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