如何指定 useNavigation 返回的類型

Question

我在指定接收useNavigation()返回的 function ( onError ) 的參數時遇到了一些困難

import { BottomTabScreenProps } from '@react-navigation/bottom-tabs'
import { CompositeScreenProps, NavigatorScreenParams, useNavigation } from '@react-navigation/native'
import { NativeStackNavigationProp, NativeStackScreenProps } from '@react-navigation/native-stack'
import { AxiosError } from 'axios'

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

export type RootStackParamList = {
  SignIn: undefined
  ResetPassword: { email: string }
  Tabs: NavigatorScreenParams<TabsParamList> | undefined
  Modal: undefined
  Error: { error: AxiosError | string } | undefined
}

export type TabsParamList = {
  Overview: NavigatorScreenParams<OverviewParamList> | undefined
  Allocation: undefined
  Menu: NavigatorScreenParams<MenuParamList> | undefined
}

export type OverviewParamList = {
  OverviewRoot: undefined
  Deposit: undefined
}

export type MenuParamList = {
  MenuRoot: undefined

  UserProfile: undefined
  // other settings
}

export type RouteName = keyof RootStackParamList | keyof OverviewParamList | keyof TabsParamList | keyof MenuParamList

export const routeTypeGuard = (route: RouteName) => route as keyof RootStackParamList

export type RootStackScreenProps<Screen extends keyof RootStackParamList> = NativeStackScreenProps<
  RootStackParamList,
  Screen
>

export type RootTabScreenProps<Screen extends keyof TabsParamList> = CompositeScreenProps<
  BottomTabScreenProps<TabsParamList, Screen>,
  NativeStackScreenProps<RootStackParamList>
>


export function useErrorHandling() {
  const navigation = useNavigation()
  // navigation.replace() // this throws a type error - which seems right

  return { onError: (error: unknown) => onError(navigation, error) } // how to avoid this to throw an error ??
}

export function onError(
  nav: ReturnType<typeof useNavigation<NativeStackNavigationProp<RootStackParamList>>>,
  error: unknown
) {
  // nav.replace // does not throw type error, but experienced it to make the app crash because nav.replace was undefined
  nav.navigate('Error', { error: error instanceof Error ? error.message : 'Unknow error' })
}

TS游樂場

Answer 1

雖然這可能不是完整的答案，但這里有一個避免錯誤的解決方法：

const navigation = useNavigation<NativeStackNavigationProp<any>>()

Answer 2

我沒有親自使用過@react-navigation ，所以我只使用類型，但它看起來像useNavigation ，當沒有類型參數調用時，默認為ReactNavigation.RootParamList ，它與您的RootStackParamList不匹配。

如果將類型參數RootStackParamList和keyof RootStackParamList指定為useNavigation ，則類型檢查正確：

export function useErrorHandling() {
  const navigation =
    useNavigation<NativeStackNavigationProp<RootStackParamList, keyof RootStackParamList>>()

  return { onError: (error: unknown) => onError(navigation, error) }
}

此外，您可以通過使用NativeStackNavigationProp<RootStackParamList, keyof RootStackParamList>而不是ReturnType應用程序稍微簡化onError的nav參數類型：

export function onError(
  nav: NativeStackNavigationProp<RootStackParamList, keyof RootStackParamList>,
  error: unknown
) {
  nav.navigate('Error', { error: error instanceof Error ? error.message : 'Unknow error' })
}

TypeScript操場