NextJS服务端console显示undefined：接口数据获取打印异常求助

核心问题有三点： #

• 异步函数调用未处理Promise：getPokemon是异步函数，直接赋值给pokemonItems得到的是Promise对象而非实际数据。且客户端组件的渲染函数不能直接使用await，导致你打印的是未resolve的Promise，后续即使resolve，返回值也是undefined。
• 返回了不存在的字段：你的API返回结构是{ data: [...] }，但getPokemon里返回data.status——这个字段根本不存在，所以就算成功获取数据，返回的也是undefined。
• 客户端组件数据获取方式错误：如果是客户端组件，不能直接在渲染逻辑里调用异步函数，必须结合useEffect和状态管理来处理异步数据。

修复方案 #

方案1：将组件改为服务器组件（推荐，适配Next.js App Router）

服务器组件支持直接在组件内使用await获取数据，修改如下：

import { Pokemon } from '@/app/types/pokemon';
import React from 'react';

export async function getPokemon() {
  const pokemon = await fetch('http://localhost:3000/api/pokemon', {
    next: {
      revalidate: 30,
    },
  });
  const data = await pokemon.json();
  // 修正：返回API实际返回的data字段
  return data.data;
}

// 将组件改为async函数（服务器组件）
export default async function Pokelist() {
  const pokemonItems = await getPokemon();
  console.log('data:', pokemonItems);
  return <>
    {/* 这里可以添加你的渲染逻辑，比如遍历pokemonItems */}
  </>;
}

方案2：保持客户端组件，用状态+useEffect处理异步

如果需要保留客户端组件特性，修改如下：

import { Pokemon } from '@/app/types/pokemon';
import React, { useState, useEffect } from 'react';

async function getPokemon() {
  const pokemon = await fetch('http://localhost:3000/api/pokemon', {
    next: {
      revalidate: 30,
    },
  });
  const data = await pokemon.json();
  return data.data;
}

const Pokelist = () => {
  const [pokemonItems, setPokemonItems] = useState(null);

  useEffect(() => {
    // 在useEffect内创建异步函数并执行
    const fetchPokemonData = async () => {
      const data = await getPokemon();
      setPokemonItems(data);
      console.log('data:', data);
    };
    fetchPokemonData();
  }, []);

  return <>
    {/* 根据pokemonItems状态渲染内容 */}
  </>;
};

export default Pokelist;

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