React 导航中嵌套导航器的 TypeScript 错误

Question

我正在使用 TypeScript 和 React Navigation 开发一个 React Native 项目。我有一个嵌套导航器设置，其中有一个 BottomTabNavigator，其中包含 BlocklistStackNavigator。当我尝试将组件分配到 BlocklistStackNavigator 中的屏幕时，我遇到了 TypeScript 错误。错误信息如下：

TS2322: Type
({ navigation, route }: Readonly<EditBlocklistScreenProps>) => Element
is not assignable to type
ScreenComponentType<ParamListBase, BlocklistsStackScreens.EDIT_BLOCKLIST> | undefined
Type
({ navigation, route }: Readonly<EditBlocklistScreenProps>) => Element
is not assignable to type FunctionComponent<{}>
Types of parameters __0 and props are incompatible.
Type {} is missing the following properties from type Readonly<EditBlocklistScreenProps>: navigation, route
types.d.ts(318, 5): The expected type comes from property component which is declared here on type
IntrinsicAttributes & RouteConfig<ParamListBase, BlocklistsStackScreens.EDIT_BLOCKLIST, StackNavigationState<ParamListBase>, StackNavigationOptions, StackNavigationEventMap>

这是我的 BlocklistStackNavigator 中的代码：

import { createStackNavigator } from '@react-navigation/stack'
import { BlocklistScreen } from '../screens/Blocklists/BlocklistScreen/BlocklistScreen.tsx'
import { BlocklistsStackScreens } from './screen-lists/BlocklistsStackScreens'
import { EditPlatformBlocklistScreen } from '../screens/Blocklists/EditPlatformBlocklistScreen'
import { CreateBlocklistScreen } from '../screens/Blocklists/CreateBlocklistScreen/CreateBlocklistScreen.tsx'
import { EditBlocklistScreen } from '../screens/Blocklists/EditBlocklistScreen/EditBlocklistScreen.tsx'

const Stack = createStackNavigator()

export function BlocklistStackNavigator() {
  return (
    <Stack.Navigator initialRouteName={BlocklistsStackScreens.MAIN_BLOCKLIST}>
      <Stack.Screen
        name={BlocklistsStackScreens.MAIN_BLOCKLIST}
        component={BlocklistScreen}
        options={{ headerShown: false }}
      />

      <Stack.Screen
        name={BlocklistsStackScreens.EDIT_BLOCKLIST}
        options={{ headerShown: true }}
        component={EditBlocklistScreen}
      />

      <Stack.Screen
        name={BlocklistsStackScreens.EDIT_PLATFORM_BLOCKLIST}
        options={{ headerShown: true }}
        component={EditPlatformBlocklistScreen}
      />

      <Stack.Screen
        name={BlocklistsStackScreens.CREATE_BLOCK_LIST}
        options={{ headerShown: true }}
        component={CreateBlocklistScreen}
        initialParams={{ mode: 'create' }}
      />
    </Stack.Navigator>
  )
}

我的编辑阻止列表屏幕：

import * as React from 'react'
import { BlocklistForm } from '../shared/BlocklistForm.tsx'
import { RouteProp } from '@react-navigation/native'
import { ScreenList } from '../../../navigators/screen-lists/screenLists.ts'
import { BlocklistsStackScreens } from '../../../navigators/screen-lists/BlocklistsStackScreens.ts'
import { NativeStackNavigationProp } from '@react-navigation/native-stack'
import { TabScreens } from '../../../navigators/screen-lists/TabScreens.ts'

export type EditBlocklistScreenProps = {
  navigation: NativeStackNavigationProp<ScreenList, TabScreens.BLOCKLIST>
  route?: RouteProp<ScreenList, BlocklistsStackScreens.EDIT_BLOCKLIST>
}

export function EditBlocklistScreen({
  navigation,
  route,
}: Readonly<EditBlocklistScreenProps>) {
  return (
    <BlocklistForm
      mode="edit"
      navigation={navigation}
      blocklistId={route?.params.blocklistId}
    />
  )
}

创建阻止列表屏幕：

import * as React from 'react'
import { BlocklistForm } from '../shared/BlocklistForm.tsx'
import { NativeStackNavigationProp } from '@react-navigation/native-stack'
import { ScreenList } from '../../../navigators/screen-lists/screenLists.ts'
import { TabScreens } from '../../../navigators/screen-lists/TabScreens.ts'

export function CreateBlocklistScreen({
  navigation,
}: Readonly<{
  navigation: NativeStackNavigationProp<ScreenList, TabScreens.BLOCKLIST>
}>) {
  return <BlocklistForm mode="create" navigation={navigation} />
}

我尝试在 EditBlocklistScreenProps 中将导航和路线道具设置为可选，但它没有解决问题。我怀疑这个问题可能与我使用嵌套导航器有关，但我不确定如何解决它。

Answer 1

您可能需要在

ScreenList

中提供

createStackNavigator

：

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

const Stack = createStackNavigator<ScreenList>();

我看不到您的 ScreenList，但请确保定义路由参数。例如：

type ScreenList = {
  EditBlocklistScreen: { userId: string }; // userId is route param
};

查看文档了解更多详细信息。