嵌套Tab导航器的Stack导航器使用NativeStackScreenProps遇TS错误

问题根源 #

你给TabHomeScreen定义的Props类型错误：该组件是HomeStack栈导航中的Home页面，而非根Tab导航中的HomeStack路由，所以不能用RootTabParamList来定义它的Props。

修复步骤 #

修改TabHomeScreen.tsx中的Props类型定义，将其与HomeStackParamList关联：

// TabHomeScreen.tsx
// 导入HomeStackParamList（确保它从App.tsx导出）
import { HomeStackParamList } from './App';
import { NativeStackScreenProps } from '@react-navigation/native-stack';

// 正确的Props类型：对应HomeStack中的"Home"路由
type Props = NativeStackScreenProps<HomeStackParamList, 'Home'>;

export function TabHomeScreen({ navigation }: Props) {
    return (
      <MenuProvider>
        <SafeAreaView>
          <View>
            {/* 栈内跳转直接写目标路由名即可，无需嵌套层级 */}
            <RoundButton onPress={() => navigation.navigate('SendLike')}/>
          </View>
          {/* 其他组件内容 */}
        </SafeAreaView>
      </MenuProvider>
    );
}

额外说明 #

1. 确保HomeStackParamList在App.tsx中是导出状态，这样其他文件才能导入使用。
2. 栈导航内部的页面跳转，直接使用栈内的路由名称（如'SendLike'）即可，不需要通过'HomeStack'层级跳转——只有从Tab导航的其他页面跳转到栈内页面时，才需要使用navigation.navigate('HomeStack', { screen: 'SendLike' })这种写法。

这样修改后，TypeScript就能正确识别组件的Props类型，消除类型不匹配的错误。

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