在 Next.js 13.4 的 App Router 架构中，使用 map 函数渲染数组却看不到内容，是比较常见的数据展示异常。这类问题大多和组件类型、数据获取时机以及 JSX 书写规范有关，并不是 map 本身有缺陷。
常见导致 map 不渲染的原因
1. 服务端组件数据未 await
在默认的服务端组件里，如果直接从接口或数据库拿数组但没有等待结果，map 处理的可能是 Promise 或 undefined。
2. 客户端组件未加 use client
当在组件里使用 useState 或 useEffect 获取数组时，忘记写 use_client 指令会让组件无法在浏览器运行，导致数组为空。
3. 缺少 key 属性
虽然缺少 key 一般不会让内容完全不显示，但在列表更新时容易出错，也被 React 明确警告。
基础修复示例
下面是一个服务端组件正确等待数据并渲染的代码：
// 服务端组件，无需 use client
export default async function Page() {
// 模拟异步获取数组
const list = await fetch('https://ipipp.com/api/items').then(res => res.json());
if (!Array.isArray(list)) {
return <p>数据格式错误</p>;
}
return (
<ul>
{list.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
客户端组件取数写法
如果必须在客户端请求，需要标记组件类型并使用 effect：
'use client';
import { useState, useEffect } from 'react';
export default function ClientList() {
const [list, setList] = useState([]);
useEffect(() => {
fetch('https://ipipp.com/api/items')
.then(res => res.json())
.then(data => setList(data));
}, []);
return (
<ul>
{list.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
排查清单
- 确认数组在 map 之前已经是有值的数组而不是 Promise
- 检查是否在该用客户端逻辑时写了
use_client - 用 console.log 打印数组，确认服务端和客户端拿到的是同一份数据
- 给 map 生成的节点加上稳定唯一的 key
注意在 App Router 中，默认组件是服务端组件，不能直接使用浏览器 API，否则会让数据获取中断。
只要按上述方式区分组件类型并正确等待数据，Next.js 13.4 里 map 不渲染数组的问题基本都能解决。