React Native TypeScript开发：NavigationState无params属性TSLint错误求解

这个问题在React Native + TypeScript开发中太常见了——TSLint报错是因为默认的NavigationState类型并没有预设params属性，TypeScript不知道你会传递什么参数，所以得给导航相关的props和状态明确自定义类型。下面是具体的实现步骤：

第一步：定义页面参数的类型接口 #

首先为NextScreen需要接收的参数创建一个清晰的接口，把你要传递的参数字段都列进去：

// 定义NextScreen页面接收的参数类型
interface NextScreenParams {
  title: string;
  // 如果还有其他参数，比如id，可以在这里添加：id: number;
}

第二步：自定义导航Props的类型 #

接下来，我们需要把上面的参数接口和React Navigation的默认导航类型结合起来，创建专属于NextScreen的导航props类型。对于类组件，我们可以扩展NavigationProps：

import { NavigationProps } from 'react-navigation';

// 生成NextScreen的导航props类型，关联我们的参数接口
type NextScreenNavigationProps = NavigationProps<NextScreenParams>;

第三步：在类组件中应用自定义类型 #

现在回到你的NextScreen组件，把组件的props类型指定为我们刚定义的NextScreenNavigationProps，这样TypeScript就能识别navigation.state.params的结构了：

import React from 'react';
import { View, Text } from 'react-native';

class NextScreen extends React.Component<NextScreenNavigationProps> {
  render() {
    // 现在访问params.title不会再触发TS错误了
    const pageTitle = this.props.navigation.state.params.title;
    
    return (
      <View>
        <Text>{pageTitle}</Text>
      </View>
    );
  }
}

export default NextScreen;

额外补充：React Navigation v5+的推荐写法 #

如果你使用的是React Navigation v5及以上版本，官方更推荐通过route.params来获取参数，而不是navigation.state.params。对应的类型定义可以这样写：

import { RouteProp, NavigationProp } from '@react-navigation/native';

// 先定义整个导航栈的参数列表
type RootStackParamList = {
  NextScreen: NextScreenParams;
  // 其他页面的参数也可以在这里添加，比如Home: undefined;
};

// 类组件中使用
class NextScreen extends React.Component<{
  navigation: NavigationProp<RootStackParamList, 'NextScreen'>;
  route: RouteProp<RootStackParamList, 'NextScreen'>;
}> {
  render() {
    const pageTitle = this.props.route.params.title;
    return <Text>{pageTitle}</Text>;
  }
}

// 函数组件的话可以用钩子配合类型
const NextScreen = () => {
  const navigation = useNavigation<NavigationProp<RootStackParamList>>();
  const route = useRoute<RouteProp<RootStackParamList, 'NextScreen'>>();
  
  return <Text>{route.params.title}</Text>;
};

注意事项 #

• 确保你已经安装了React Navigation对应的类型依赖（v5+版本的@react-navigation/native自带类型，旧版本可能需要单独安装@types/react-navigation）。
• 尽量保持参数类型的准确性，这样不仅能解决TS错误，还能在开发过程中获得类型提示，减少bug。

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