React Native中TS2322类型不兼容错误求助

错误本质 #

这个TypeScript错误的核心是类型不匹配：你的Login组件未声明接收React Navigation自动注入的navigation、route等路由属性，导致无法满足ScreenComponentType的类型要求。

分步解决方案 #

1. 定义规范的路由参数列表（types.ts） #

首先在types.ts中明确应用的路由参数结构，确保包含Login页面的定义：

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

// 定义所有页面的路由参数，Login无参数则设为undefined
export type RootStackParamList = ParamListBase & {
  Login: undefined;
  // 其他页面示例：Home: { userId: string };
};

2. 给Login组件配置正确的Props类型（login.tsx） #

使用React Navigation提供的StackScreenProps，让Login组件的props自动继承路由相关属性：

import React from 'react';
import { View, Text, Button } from 'react-native';
import { StackScreenProps } from '@react-navigation/stack';
import { RootStackParamList } from './types';

// 明确props类型，包含navigation和route
type LoginProps = StackScreenProps<RootStackParamList, 'Login'>;

export const Login = ({ navigation }: LoginProps) => {
  return (
    <View>
      <Text>Login Page</Text>
      {/* 示例：跳转到其他页面 */}
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
    </View>
  );
};

3. 绑定路由参数到Stack Navigator（app.tsx） #

创建Stack Navigator时必须指定你定义的RootStackParamList，让TypeScript能正确校验页面组件：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { RootStackParamList } from './types';
import { Login } from './login';

// 关联路由参数列表到Stack导航器
const Stack = createStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        {/* name必须和RootStackParamList中的"Login"完全匹配（大小写一致） */}
        <Stack.Screen name="Login" component={Login} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

4. 排查常见错误点 #

• 路由名称不匹配：确保RootStackParamList中的页面名称和Stack.Screen的name属性完全一致，TypeScript对字符串字面量类型是严格校验的。
• 手动传递路由props：使用component属性时，React Navigation会自动注入navigation和route，不要手动给Login传递这些属性，否则会破坏类型匹配。
• 严格模式校验：如果tsconfig.json中strict: true，必须保证所有props类型完全匹配，不能有遗漏；若之前用宽松模式，切换后需补全所有类型定义。

5. 自定义props传递（可选） #

如果需要给Login传递额外自定义props，可通过嵌套组件的方式扩展：

// 扩展LoginProps，添加自定义属性
type LoginProps = StackScreenProps<RootStackParamList, 'Login'> & {
  customTitle: string;
};

// 在Stack.Screen中传递自定义props
<Stack.Screen name="Login">
  {(props) => <Login {...props} customTitle="自定义登录标题" />}
</Stack.Screen>

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