Next.js中如何动态访问CryptoCompare API嵌套JSON内的数据

方法一：利用已知的动态币种符号直接访问 #

因为你调用API时已经将context.params.symbol作为fsyms参数传入，返回的RAW对象中必然包含该符号对应的键，直接通过该键即可访问数据：

修改你的getServerSideProps代码，提前处理数据并传递给组件：

export const getServerSideProps = async (context) => {
  const { symbol } = context.params;
  const res = await fetch(
    `https://min-api.cryptocompare.com/data/pricemultifull?tsyms=USD&fsyms=${symbol}`
  );  
  const data = await res.json();
  
  // 用动态符号访问RAW内的数据，可选链避免报错
  const coinData = data.RAW?.[symbol]?.USD;

  return {
    props: {
      coinData,
    },
  };
};

在组件中直接使用处理后的数据：

export default function CoinDetail({ coinData }) {
  if (!coinData) return <div>数据加载失败</div>;
  
  return (
    <div>
      <h2>当前价格：{coinData.PRICE} USD</h2>
      <p>24小时涨幅：{coinData.CHANGEPCT24HOUR}%</p>
    </div>
  );
}

方法二：提取RAW对象的第一个键（适用于不确定键名的场景） #

如果无法预知RAW内的键名，可通过Object.keys()获取所有键，再取第一个键对应的数据：

export const getServerSideProps = async (context) => {
  const res = await fetch(
    `https://min-api.cryptocompare.com/data/pricemultifull?tsyms=USD&fsyms=${context.params.symbol}`
  );  
  const data = await res.json();
  
  // 获取RAW对象的所有键，取第一个对应的数据
  const rawKeys = Object.keys(data.RAW || {});
  const coinData = rawKeys.length ? data.RAW[rawKeys[0]].USD : null;

  return {
    props: {
      coinData,
    },
  };
};

注意事项 #

• 使用**可选链操作符?.**避免API返回结构异常导致的报错；
• 增加数据存在性判断，给用户友好的加载失败提示；
• 可提前对context.params.symbol做合法性校验，确保请求的是有效币种符号。

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