使用Next.js+Axios获取帖子列表时出现undefined报错的问题

这个报错的核心原因是你在Next.js App Router（app/posts/page.jsx属于App Router）中误用了Pages Router的getStaticProps方法，或者数据传递/初始化环节存在问题，导致要map的posts变量为undefined。下面是具体的错误点和修复方案：

1. App Router不支持getStaticProps #

getStaticProps是Next.js Pages Router（pages/目录下的组件）的静态生成数据方法，而你使用的app/posts/page.jsx属于App Router，这个路由体系下不再使用getStaticProps，而是通过Server Component直接异步获取数据，或者用客户端组件结合useEffect获取。

修复方案：Server Component方式（推荐） #

直接在app/posts/page.jsx中异步获取数据，再传递给子组件：

// app/posts/page.jsx
import axios from 'axios';
import ListOfPosts from '@/components/ListOfPosts';

// App Router的page组件默认是Server Component，可直接写异步逻辑
async function PostsPage() {
  const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
  const posts = response.data;

  return <ListOfPosts posts={posts} />;
}

export default PostsPage;

然后在ListOfPosts.jsx中接收posts props，并在map前做存在性判断：

// components/ListOfPosts.jsx
export default function ListOfPosts({ posts }) {
  // 先判断posts是否存在，避免undefined时调用map报错
  if (!posts || posts.length === 0) {
    return <div>暂无帖子数据</div>;
  }

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </li>
      ))}
    </ul>
  );
}

2. 未初始化posts默认值（客户端组件场景） #

如果你的ListOfPosts是客户端组件（需要交互逻辑），则需要用useState初始化posts的默认值，避免初始渲染时posts为undefined：

// components/ListOfPosts.jsx
'use client'; // 标记为客户端组件

import axios from 'axios';
import { useState, useEffect } from 'react';

export default function ListOfPosts() {
  // 初始化posts为空数组，而非undefined
  const [posts, setPosts] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    async function fetchPosts() {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
        setPosts(response.data);
      } catch (error) {
        console.error('获取帖子失败:', error);
      } finally {
        setIsLoading(false);
      }
    }

    fetchPosts();
  }, []);

  if (isLoading) {
    return <div>加载中...</div>;
  }

  if (posts.length === 0) {
    return <div>暂无帖子数据</div>;
  }

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </li>
      ))}
    </ul>
  );
}

3. 检查props传递是否正确 #

如果你确认数据获取正常，但仍报错，大概率是page.jsx没有把posts正确传递给ListOfPosts组件。比如之前可能在ListOfPosts里写了getStaticProps，但App Router不识别，导致组件内部的posts为undefined，此时需要把数据获取逻辑移到page.jsx或者客户端组件的useEffect中。

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