NextJS中如何正确提取嵌套JSON API的嵌套数据？

核心问题：字段名不匹配与路径错误 #

你代码里读取嵌套字段的路径和JSON结构完全不对应，这是导致数据为空的直接原因：

• 你用card.value.title，但JSON里对应的字段是card.value.card_title
• 你用card.value.image.src，但JSON里图片地址实际在card.value.image.original.src层级下

修复后的代码示例 #

CardsPage.js #

...imports...

const CardsPage = ({ title, comments, cards }) => {
    return (
        <div className={s['CardsPage']}>
            <p> title:{title} </p>
            <RawHtml html={comments} />

            <div>
                {cards.map((card, key) => (
                    <div key={card.id}>
                        <p>{card.type}</p>
                        {/* 修正字段名：title → card_title */}
                        <p>{card.value?.card_title}</p>
                        {/* 修正路径：image.src → image.original.src，添加可选链避免报错 */}
                        <img 
                            src={card.value?.image?.original?.src} 
                            alt={card.value?.image?.original?.alt || 'BigCo Inc. logo'}
                        />
                    </div>
                ))}
            </div>
        </div>
    );
};

CardsPage.defaultProps = {
    title: '',
    comments: '',
    // cards默认值从空字符串改为空数组，避免map遍历报错
    cards: [],
    image: '',
};

CardsPage.propTypes = {
    title: PropTypes.string.isRequired,
    comments: PropTypes.string,
    // 补充cards的类型校验，明确嵌套结构
    cards: PropTypes.arrayOf(PropTypes.shape({
        type: PropTypes.string,
        value: PropTypes.shape({
            card_title: PropTypes.string,
            image: PropTypes.shape({
                original: PropTypes.shape({
                    src: PropTypes.string,
                    alt: PropTypes.string
                })
            })
        })
    })),
    // 修正拼写错误：isrequired → isRequired
    image: PropTypes.string.isRequired,
    ...
};

export default basePageWrap(CardsPage);

额外优化建议 #

• 用可选链操作符(?.)：防止部分card数据缺失嵌套字段时抛出错误，确保页面不会崩溃
• map遍历用唯一id当key：用card.id替代index作为key，渲染性能更稳定
• 字段映射（可选）：如果后端JSON字段名（如card_title）不符合前端驼峰习惯，可以在请求数据后做一次字段转换，让代码更易读

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