React Native路由参数渲染错误求助：undefined is not an object

• 给参数解构加默认值
  当返回主页面时，如果route.params是undefined，直接解构内部字段就会触发报错。给params和各个字段设置默认值，就能避免这种情况：

  import { useRoute } from '@react-navigation/native' 
  
  const ProductInfo = () => {
    const {
      params: {
        category = '',
        coreProduct = '',
        subProduct = ''
      } = {},
    } = useRoute()
  
    return (
      <>
        <Text>{category}</Text>
        <Text>{coreProduct}</Text>
        <Text>{subProduct}</Text>
        {/* 其他组件代码 */}
      </>
    )
  }
  

• 检查主页面的导航触发逻辑
  确认返回主页面时的导航操作是否传递了完整参数：

  • 如果是用navigation.navigate跳转，必须带上参数对象：

    navigation.navigate('MainPage', {
      category: selectedCategory,
      coreProduct: selectedCoreProduct,
      subProduct: selectedSubProduct
    })
    

  • 如果是通过goBack()返回，要确保之前进入子页面时，主页面在导航栈中的参数没有被意外修改或清空。

• 用可选链做安全访问
  也可以用可选链操作符?.配合空值合并运算符??，逐个获取参数并设置默认值，写法更直观：

  import { useRoute } from '@react-navigation/native' 
  
  const ProductInfo = () => {
    const route = useRoute()
    const category = route.params?.category ?? ''
    const coreProduct = route.params?.coreProduct ?? ''
    const subProduct = route.params?.subProduct ?? ''
  
    return (
      <>
        <Text>{category}</Text>
        <Text>{coreProduct}</Text>
        <Text>{subProduct}</Text>
        {/* 其他组件代码 */}
      </>
    )
  }
  

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