Next.js中getStaticProps返回undefined结果，请求排查问题

我按照教程实现宝可梦列表，但代码库配置可能存在问题，不确定违反了Next.js中getStaticProps的哪些约定，出现getStaticProps返回undefined的报错。

页面代码 #

// 接收getStaticProps传递的allPokemons数据的页面组件
export default function Home({ allPokemons }) {
  return (
      <ul>
          {/* 遍历数据生成列表 */}
          {allPokemons.map((poke) => (
              <li key={poke.url}>{poke.name}</li>
          ))}
      </ul>
  );
}

export async function getStaticProps() {
  // 调用PokeAPI获取数据
  const response = await fetch('https://pokeapi.co/api/v2/pokemon/');
  // 解析JSON数据
  const data = await response.json();
  // 返回数据作为props传递给页面组件
  return {
      props: { allPokemons: data.results },
  };
}

报错截图 #

问题排查与解决 #

1. 核心问题：Next.js路由体系不匹配 #

你的代码是Pages Router（pages/目录）的标准写法，但如果项目初始化时选择了App Router（app/目录），getStaticProps完全不生效——App Router不再支持Pages Router的这些数据获取函数，会导致props无法传递，最终出现undefined。

• 解决：确认项目结构，如果是Pages Router，确保代码放在pages/目录下；如果是App Router，改用服务器组件直接获取数据（无需getStaticProps）：

// app/page.js（App Router首页）
export default async function Home() {
  const response = await fetch('https://pokeapi.co/api/v2/pokemon/');
  const data = await response.json();
  const allPokemons = data.results || [];
  
  return (
    <ul>
      {allPokemons.map((poke) => (
        <li key={poke.url}>{poke.name}</li>
      ))}
    </ul>
  );
}

2. 缺失异常处理 #

当前getStaticProps没有处理请求失败的情况，一旦API请求出错（比如网络问题、返回非200状态码），函数会直接抛出错误，无法正常返回props，表现为undefined。添加异常捕获：

export async function getStaticProps() {
  try {
    const response = await fetch('https://pokeapi.co/api/v2/pokemon/');
    // 检查请求是否成功
    if (!response.ok) throw new Error(`请求失败，状态码：${response.status}`);
    
    const data = await response.json();
    return {
      props: { allPokemons: data.results || [] },
    };
  } catch (err) {
    console.error('获取宝可梦数据失败：', err);
    // 兜底返回空数组，避免页面崩溃
    return { props: { allPokemons: [] } };
  }
}

3. 组件空值兜底 #

即使数据正常返回，也可能因为API返回data.results为undefined导致页面报错，给组件的props加默认值：

export default function Home({ allPokemons = [] }) {
  return (
      <ul>
          {allPokemons.length === 0 ? (
            <li>暂无宝可梦数据</li>
          ) : (
            allPokemons.map((poke) => (
              <li key={poke.url}>{poke.name}</li>
            ))
          )}
      </ul>
  );
}

4. 验证项目配置 #

检查next.config.js，确保没有强制启用App Router的配置；同时确认pages/目录存在且被Next.js识别（Pages Router项目的核心标识）。

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