React Native跳转ResourceDetail页报_props$route$params$d.id相关TypeError怎么解决？

你遇到的类型报错本质是尝试从undefined值上读取id属性导致的，具体诱因有两个：

• 列表页的renderData方法中，Card组件绑定的onPress事件调用clickedItem时没有传入当前遍历的item参数，导致clickedItem接收的data形参为undefined，跳转时传递给详情页的data参数也为空
• 详情页直接从props.route.params.data上解构属性，没有做空值兼容，当data为undefined时读取属性就会触发报错

第一步：修复列表页传参逻辑 #

给clickedItem调用传入当前item参数即可，修改后的代码如下：

const clickedItem = (data) => {
        props.navigation.navigate("ResourceDetail", { data: data })
 }  

const renderData = (item) => {
        return (
            <Card style={styles.cardStyle} onPress={() => clickedItem(item)}>
                <Text style={{ fontSize: 25 }}>{item.title}</Text>
                <Text style={{ fontSize: 17 }}>{item.docs}</Text>
            </Card>
        )
    }

第二步：可选优化（详情页加空值兼容） #

可以给详情页的参数读取增加可选链和默认值兜底，避免偶发的参数为空时页面崩溃：

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

function ResourceDetail(props) {
    // 用可选链判断params.data是否存在，不存在则兜底为空对象
    const { id, title, docs } = props.route.params?.data ?? {};
    return (
        <Text>{title ?? '暂无数据'}</Text>
    )
}

export default ResourceDetail

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