React Navigation类型报错：Property 'navigate'不存在于指定类型

问题根源 #

你错误地将路由参数列表类型AppParamList['AuthStack']直接传给了useNavigation，但useNavigation需要的是对应导航器的导航属性类型（而非单纯的路由参数结构）。TypeScript因此误判navigation对象为路由参数列表本身，自然找不到navigate方法。

解决步骤 #

1. 导入正确的导航类型 #

根据你使用的导航器类型（这里是原生栈），从对应包中导入导航属性类型：

import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { AppParamList } from './Routes';

2. 定义栈专属的导航类型 #

将路由参数列表与导航器类型结合，生成正确的导航属性类型：

// 定义Auth栈的导航属性类型
type AuthStackNavigationProp = NativeStackNavigationProp<AppParamList['AuthStack']>;

3. 给useNavigation指定正确泛型 #

在组件中使用上述类型获取navigation对象：

const LandingScreen = () => {
  const navigation = useNavigation<AuthStackNavigationProp>();

  const handleGoToGetStarted = () => {
    // 此时navigate方法类型完全匹配，不会报错
    navigation.navigate('GetStarted');
  };

  // 组件其余逻辑...
};

4. 可选：全局复用导航类型（优化） #

可以在Routes.tsx中提前定义好所有栈的导航类型，避免重复代码：

// Routes.tsx
import { NativeStackNavigationProp } from '@react-navigation/native-stack';

export type AppParamList = {
  AuthStack: {
    Landing: undefined;
    GetStarted: undefined;
    VerifyOTP: { email: string };
    PrivacyPolicy: undefined;
    TermsOfService: undefined;
  };
  // 其他栈/标签页类型...
};

// 全局导出Auth栈导航类型
export type AuthStackNavigationProp = NativeStackNavigationProp<AppParamList['AuthStack']>;

之后在组件中直接导入复用：

import { useNavigation } from '@react-navigation/native';
import { AuthStackNavigationProp } from './Routes';

const LandingScreen = () => {
  const navigation = useNavigation<AuthStackNavigationProp>();
  // ...
};

完成上述调整后，TypeScript就能正确识别navigation对象的所有方法，navigate、goBack等操作都会获得正确的类型提示，错误也会消失。

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