React Tabs Navigation传参报错：无法读取undefined的params属性

核心问题分析 #

你遇到的错误是因为路由参数传递方式不符合React Navigation嵌套导航器的规则，同时未对route或params做空值防护。在Expo tabs模板中，(tabs)是嵌套导航器容器，直接向它传参时，参数需正确嵌套到目标screen的params字段；更简单的方式是直接导航到目标screen名称，而非导航器容器。

正确传参方式 #

方式1：直接导航到目标Screen（推荐）

跳过(tabs)导航器容器，直接使用目标screen的名称（如screen2）传参：

// index.jsx 修改导航代码
navigation.navigate('screen2', { data: 'test' })

方式2：通过导航器容器跳转（嵌套传参）

若必须通过(tabs)导航器跳转，需将参数嵌套在params字段中传递给内部screen：

// index.jsx 修改导航代码
navigation.navigate('(tabs)', {
  screen: 'screen2',
  params: { data: 'test' }
})

目标页面的安全处理 #

无论用props接收route还是useRoute钩子，都要添加可选链操作符避免空值报错，同时做默认值兜底：

用props接收route的写法

// screen2.jsx
export default function ScreenTwo({ route }) {
  // 可选链+默认值避免undefined报错
  const data = route?.params?.data || '无数据';

  return (
    <ThemedView
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <ThemedText type="title">{data}</ThemedText>
    </ThemedView>
  );
}

用useRoute钩子的写法

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

export default function ScreenTwo() {
  const route = useRoute();
  const data = route?.params?.data || '无数据';

  return (
    <ThemedView
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <ThemedText type="title">{data}</ThemedText>
    </ThemedView>
  );
}

额外注意事项 #

• 确认screen名称完全匹配：比如你后来写的swimmer，要确保它在tabs导航器配置中是正确的screen名称，拼写错误会导致参数无法传递。
• 避免直接向导航器容器传递非嵌套参数：之前你写的navigation.navigate('(tabs)', {screen: 'swimmer', data: 'Hello'})会导致route.params不存在，因为参数未嵌套到目标screen的params字段中。

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