Next.js中获取渲染嵌套对象数据解决TypeError报错

• 解构取值逻辑错误：Object.values(allPosts.bpi) 返回的遍历项本身就是bpi字段下存储的货币对象（即USD、GBP对应的包含code/description/rate字段的对象），原代码中解构的section、idx属性在遍历项中根本不存在，访问section.description时自然会拿到undefined，触发类型错误。
• 缺失必要兜底：getStaticProps中data初始值为空数组，若接口请求失败，allPosts为数组类型，访问allPosts.bpi会直接返回undefined，后续调用Object.values也会报错。
• 缺失依赖引入：原代码中使用的Head组件、utilStyles样式表未做导入，运行时会触发额外报错。

import Layout, { siteTitle } from '../components/layout';
import Head from 'next/head';
import utilStyles from '../styles/utils.module.css'; // 请根据你的实际项目路径调整引入地址
import { useState, useEffect } from 'react'

export default function Home({ allPosts, error }) {  
  return (
    <Layout home>
      <Head>
        <title>{siteTitle}</title>
      </Head>
      <section>
        {Object.values(allPosts?.bpi || {}).map((currency) => (
          <li className={utilStyles.listItem} key={currency.code}>
            {currency.description}
            <br />
            {currency.code}
            <br />
            {currency.rate}
          </li>
        ))}
      </section>
    </Layout>
  );
}

export async function getStaticProps() {
  let data = {};
  let error = "";
  try {
    const res = await fetch(
      "https://api.coindesk.com/v1/bpi/currentprice.json",
    );
    data = await res.json();
  } catch (e) {
    error = e.toString();
  }

  return {
    props: {
      allPosts: data,
      error,
    },
  };
}

• 遍历逻辑调整：直接读取遍历到的货币对象上的字段，不再访问不存在的section属性；使用每个货币唯一的code作为列表key，比索引key渲染稳定性更高。
• 增加异常兜底：通过可选链?.和空值兜底|| {}，避免接口异常、数据为空时访问属性触发报错；将data初始值从空数组调整为空对象，和接口返回的结构类型保持一致。
• 补全缺失导入：添加了Head组件和utilStyles的引入语句，消除导入缺失导致的运行时错误。

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