React Native同屏访问路由参数报错undefined如何解决？

props.route.params 是路由框架传递给当前页面的入参，只有其他页面跳转到你当前页面时携带的参数，才会存入这个对象。你在调用props.navigation.navigate("myScreen", {myId: xxx})时，携带的myId是传给目标页面myScreen的，不属于当前页面的入参，自然在当前页的props.route.params里找不到，就会触发如下报错：

undefined is not an object (evaluating 'props.route.params.myId')

根据你的使用场景选对应方案即可：

场景1：仅在点击按钮的逻辑里用到该id #

你本身就已经持有要传递的myId值，直接使用itemData.item.id即可，无需从props.route.params获取。示例：

<Flatlist 
    data={SOMEDATA}
    renderItem={(itemData) => {
        // 直接用这个值就行，不管是存变量还是做逻辑处理都可以
        const currentMyId = itemData.item.id
        return (
          <Button
            onPress={() => {
              console.log('当前选中的id是', currentMyId)
              props.navigation.navigate("myScreen", {
                myId: currentMyId,
              })
            }}
          >
         </Button>
      )
}}
/>

场景2：需要在当前页面其他位置复用这个选中的id #

把选中的id存在当前页面的状态里即可：

import { useState } from 'react'

// 当前页面组件内部
const YourCurrentPage = (props) => {
  const [selectedMyId, setSelectedMyId] = useState(null)

  return (
    <Flatlist 
      data={SOMEDATA}
      renderItem={(itemData) => (
            <Button
              onPress={() => {
                const id = itemData.item.id
                setSelectedMyId(id)
                props.navigation.navigate("myScreen", {
                  myId: id,
                })
              }}
            >
           </Button>
        )}
    />
  )
}

后续你要用到这个id的地方直接读取selectedMyId即可。

场景3：你确实需要跳转当前页面并传参 #

如果你的业务逻辑就是要跳转当前页面（比如刷新当前页、加载同页面不同数据），那么调用navigate时填当前页面的路由名即可，参数会存入当前页的props.route.params。注意要加可选链和默认值，避免首次加载页面没传参时报错：

// 读取的时候加可选链和默认值，防止首次加载报错
const myId = props.route?.params?.myId ?? '默认值'

// 跳转当前页传参的写法
props.navigation.navigate("你的当前页面路由名", {
  myId: itemData.item.id,
})

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