Next.js中TypeError: posts.map is not a function问题求助

核心错误分析：TypeError: posts.map is not a function #

这个错误直接说明当前posts的值不是数组——虽然你用useState<Post[]>([])初始化了空数组，但API请求返回的data大概率不符合预期的数组类型，导致setPosts后posts变成了非数组值（比如对象、undefined、null）。

第一步：先确认API返回的实际数据 #

在setPosts前加日志打印，同时补上错误捕获，明确问题出在哪：

useEffect(() => {
    getAllPosts()
        .then((data) => {
            console.log('API返回内容:', data); // 打印实际返回值
            setPosts(data);
        })
        .catch(err => console.error('请求出错:', err)); // 捕获请求失败的情况
}, [])

常见的异常场景：

1. API返回格式不符：比如接口实际返回{ code: 200, data: [...] }这种带外层包装的对象，而非直接返回数组
2. 请求失败：比如API_URL配置错误、跨域问题、后端接口报错，导致response.json()返回错误信息对象或undefined
3. 响应状态码异常：比如404/500，但你没做状态校验，直接解析了错误响应的JSON

对应修复方案 #

场景1：API返回带外层包装

修改getAllPosts，取出实际的数组字段：

export async function getAllPosts(): Promise<Post[]> {
    const response = await fetch(`${API_URL}/posts`)
    const resData = await response.json();
    return resData.data; // 替换成接口实际返回的数组字段名，比如list、posts等
}

场景2：请求失败/状态码异常

给请求加上状态校验，抛出错误避免非数组值流入状态：

export async function getAllPosts(): Promise<Post[]> {
    const response = await fetch(`${API_URL}/posts`)
    if (!response.ok) {
        throw new Error(`请求失败: ${response.status}`); // 抛出错误，让上层catch处理
    }
    return await response.json()
}

关于你提到的key用法 #

key是React列表渲染的必填项（不写只会触发警告，不会导致当前的运行时错误），作用是帮助React高效识别列表项的变化。直接用每个post的唯一标识id即可：

{posts.map((item) =>
    <div key={item.id}>{item.title}</div>
)}

⚠️ 注意：不要用数组索引作为key，除非列表是完全静态不会排序/增删的，否则会引发性能问题和渲染异常。

额外的安全防护 #

为了避免类似错误再次发生，可以在渲染前先判断posts是否为数组：

{Array.isArray(posts) ? posts.map((item) =>
    <div key={item.id}>{item.title}</div>
) : <div>暂无数据</div>}

或者用空值合并简化：

{(posts || []).map((item) =>
    <div key={item.id}>{item.title}</div>
)}

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