React Native TS定义导航Nav类型报This expression is not callable错误

错误原因 #

自定义的Nav类型结构定义错误：

• 原代码将navigate声明为包含name、params属性的普通对象类型，但navigate本身是接收路由配置的可调用函数
• TypeScript识别到你对对象类型的值做函数调用操作，直接抛出This expression is not callable报错。

修复代码 #

将navigate的类型修正为函数类型即可，完整代码如下：

import { Pressable, Text, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';

// 修正Nav类型：navigate为函数类型
type Nav = {
  navigate: (screenConfig: {
    name: string;
    params: {
      useBack: boolean;
    };
  }) => void;
};

const InfoLink = ({
  componentName,
  title,
}: {
  componentName: string;
  title: string;
}) => {
  const navigation = useNavigation<Nav>();

  return (
    <Pressable
      style={styles.linkRoot}
      onPress={() =>
        navigation.navigate({ name: componentName, params: { useBack: true } })
      }
    >
      <View style={styles.linkContainer}>
        <View>
          <Text style={styles.linkText}>{title}</Text>
        </View>
      </View>
    </Pressable>
  );
};
export default InfoLink;

优化提示 #

如果项目路由数量较多，不推荐每次手动声明Nav类型，可以使用React Navigation官方提供的类型定义方案，预先声明全局路由参数映射，后续调用useNavigation、useRoute等钩子时会自动推导正确类型，同时获得路由名、参数的自动补全提示，避免手写类型出错。

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