React Native NavigationStack组件类型不匹配问题求助

问题原因 #

错误核心在于RestaurantScreen的组件Props类型未正确关联你定义的RootStackParams，导致React Navigation无法识别该组件的导航属性与路由参数类型，从而抛出类型不兼容报错。

解决方案 #

给RestaurantScreen定义正确的Props类型，使用NativeStackScreenProps关联你的RootStackParams和对应路由名'Restaurant'，同时确保RootStackParams被正确导入到该文件。

修改后的Restaurant.tsx示例代码 #

// 导入必要的类型依赖
import { NativeStackScreenProps } from '@react-navigation/native-stack';
// 导入App.tsx中定义的RootStackParams类型
import type { RootStackParams } from './App';

// 为RestaurantScreen定义正确的Props类型
type RestaurantScreenProps = NativeStackScreenProps<RootStackParams, 'Restaurant'>;

const RestaurantScreen: React.FC<RestaurantScreenProps> = ({ navigation, route }) => {
  // 此时route.params的类型已被正确推断，可安全访问name字段
  const { name } = route.params;

  return (
    <View style={styles.container}>
      <Text>当前餐厅：{name}</Text>
      {/* 其他组件内容 */}
    </View>
  );
};

关键说明 #

• 必须确保RootStackParams被正确导入到RestaurantScreen所在文件，否则TypeScript无法识别路由参数的具体类型。
• 使用NativeStackScreenProps<RootStackParams, 'Restaurant'>后，TypeScript会自动推断出navigation和route的正确类型，包括route.params中的name字段。
• 若你之前自定义了RestaurantProps类型，需替换为上述的RestaurantScreenProps，避免类型不匹配问题。

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