React Navigation state.params失效求助：高级应用无法获取参数

我之前也碰到过这个头疼的问题！尤其是在复杂嵌套导航场景下，参数莫名其妙就丢了，明明按文档传了却拿不到。咱们一步步来排查解决：

1. 先确认你的React Navigation版本（最常见的坑！） #

如果你的项目用的是5.x及以上版本，官方文档里的state.params已经是旧写法了！新版本把路由状态和导航操作拆分开，参数要从route对象里取，而不是navigation.state：

类组件写法： #

class FontsTab extends React.Component {
  componentDidMount() {
    // 不要再用 this.props.navigation.state.params！
    const { id } = this.props.route.params;
    console.log('拿到的id:', id);
  }
  // ...其他代码
}

函数组件写法： #

import { useRoute } from '@react-navigation/native';

function FontsTab() {
  const route = useRoute();
  const { id } = route.params;
  // ...其他代码
}

2. 检查跳转时的参数传递是否完整 #

你提到的跳转代码，一定要确保参数没有漏传或者值为undefined：

<TouchableWithoutFeedback onPress={() => 
  // 先确认it（应该是item？）的id存在
  console.log('要传递的id:', it.id);
  this.props.navigation.navigate('FontsTab', { id: it.id })
}>
  {/* 你的点击内容 */}
</TouchableWithoutFeedback>

3. 嵌套导航场景下的特殊处理 #

如果FontsTab是嵌套在TabNavigator/StackNavigator里的子页面，直接传参数可能会被外层导航拦截，需要用嵌套跳转的格式：

this.props.navigation.navigate('外层导航的名称', {
  screen: 'FontsTab', // 指定要跳转的子页面
  params: { id: it.id } // 传递参数
});

4. 给参数加兜底避免报错 #

即使按规范传参，也可能因为页面重新挂载等意外情况导致参数丢失，建议添加默认值：

// 类组件
const { id = '默认ID' } = this.props.route.params || {};
// 函数组件
const { id = '默认ID' } = route.params || {};

5. 处理页面重新渲染导致的参数丢失 #

如果页面切换后再回来参数不见了，可以用导航的焦点监听钩子重新获取参数：

// 函数组件示例
import { useFocusEffect } from '@react-navigation/native';
import React, { useState } from 'react';

function FontsTab() {
  const route = useRoute();
  const [currentId, setCurrentId] = useState(route.params?.id);

  useFocusEffect(
    React.useCallback(() => {
      // 每次页面获得焦点时更新参数
      setCurrentId(route.params?.id);
    }, [route.params])
  );
  // ...其他代码
}

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