NextJS中遍历CoinMarketCap API返回的加密货币数组问题

一、先抓500服务器错误的核心原因 #

500内部错误基本出在api/coin-market-cap-api.ts的服务端逻辑里，先从这里排查：

1. 修正API路由的请求与数据返回逻辑 #

CoinMarketCap的API返回结构是外层包裹data字段的对象，直接返回整个响应会导致前端拿到的不是可遍历的数组。另外要确保密钥配置、请求参数正确，比如指定limit=10获取前10个币种：

// api/coin-market-cap-api.ts
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    const apiKey = process.env.COINMARKETCAP_API_KEY;
    if (!apiKey) {
      return res.status(500).json({ error: 'API密钥未配置' });
    }

    const response = await fetch('https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest', {
      method: 'GET',
      headers: {
        'X-CMC_PRO_API_KEY': apiKey,
        'Accept': 'application/json',
      },
      // 直接在URL拼接参数，避免fetch的params兼容性问题
      body: null,
    });

    if (!response.ok) {
      throw new Error(`API请求失败: ${response.statusText}`);
    }

    const result = await response.json();
    // 提取真正的币种数组返回给前端
    res.status(200).json(result.data);
  } catch (error) {
    console.error('API路由报错:', error);
    res.status(500).json({ error: '获取币种数据失败' });
  }
}

2. 确认API返回的有效结构 #

CoinMarketCap返回的单个币种数据结构示例：

{
  "id": 1,
  "name": "Bitcoin",
  "symbol": "BTC",
  "quote": {
    "USD": {
      "price": 45200.56
    }
  }
}

必须确保API路由返回的是这种对象组成的数组，而非外层带data字段的嵌套对象。

二、组件端的数据传递与渲染修复 #

1. 用服务端渲染传递数据（避免客户端跨域+提前渲染） #

NextJS推荐用getServerSideProps在服务端获取数据后传递给组件，避免客户端请求的跨域问题，同时保证组件拿到有效数据再渲染：

// HomePageHeader.tsx
import type { NextPage } from 'next';

// 定义币种类型，避免TypeScript类型报错
interface CryptoItem {
  id: number;
  name: string;
  symbol: string;
  quote: {
    USD: {
      price: number;
    };
  };
}

const HomePageHeader: NextPage<{ cryptoList: CryptoItem[] }> = ({ cryptoList }) => {
  return (
    <div className="crypto-price-list">
      <h3>Top 10加密货币价格</h3>
      <ul>
        {cryptoList.map(item => (
          <li key={item.id} className="crypto-item">
            <span>{item.name} ({item.symbol})</span>
            <span>${item.quote.USD.price.toFixed(2)}</span>
          </li>
        ))}
      </ul>
    </div>
  );
};

// 服务端获取数据，传递给组件
export async function getServerSideProps() {
  try {
    const res = await fetch('http://localhost:3000/api/coin-market-cap-api');
    if (!res.ok) throw new Error('数据请求失败');
    const cryptoList = await res.json();
    return { props: { cryptoList } };
  } catch (err) {
    console.error('组件数据获取报错:', err);
    // 出错时返回空数组，避免组件渲染崩溃
    return { props: { cryptoList: [] } };
  }
}

export default HomePageHeader;

2. 常见坑点排查 #

• 空数据处理：API请求失败时返回空数组，避免map遍历undefined直接崩溃
• 唯一key值：用币种的id作为key，不要用数组索引，避免渲染警告和性能问题
• 类型定义：TypeScript项目必须定义数据类型，否则容易出现“属性不存在”的报错
• 客户端请求替代方案：如果非要用客户端useEffect请求，必须保证API路由做了跨域处理，且请求地址是自己的API路由，而非直接调用CoinMarketCap的接口（会暴露密钥）

三、快速调试技巧 #

1. 在API路由里加console.log(result.data)，确认返回的是有效数组
2. 在getServerSideProps里打印cryptoList，检查数据是否正确传递到组件
3. 查看服务器终端和浏览器控制台的报错信息，精准定位是字段未定义还是类型不匹配

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