Next.js 13实验版报错：photos.map is not a function 求排查

你调用getPhotos()后得到的是Promise对象，不是直接的照片数组，而Promise没有map方法，所以触发photos.map is not a function报错。

根据你使用的Next.js 13组件类型，选择对应的写法：

情况1：客户端组件（或Pages Router） #

如果这是客户端组件（比如添加了'use client'指令）或者使用Pages Router，需要用React的状态管理和副作用钩子来处理异步请求：

import { useState, useEffect } from 'react';

async function getPhotos() {
  const res = await fetch('https://jsonplaceholder.typicode.com/photos');
  return res.json();
}

export default function Photos() {
  const [photos, setPhotos] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchPhotos = async () => {
      try {
        const data = await getPhotos();
        setPhotos(data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchPhotos();
  }, []);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>请求出错：{error.message}</div>;

  return (
    <div>
      {photos.map((photo) => (
        <div key={photo.id}>{photo.title}</div>
      ))}
    </div>
  );
}

情况2：App Router服务器组件 #

Next.js 13 App Router默认是服务器组件，支持顶层await，直接等待异步函数返回结果即可：

async function getPhotos() {
  const res = await fetch('https://jsonplaceholder.typicode.com/photos');
  // 校验请求状态，避免返回无效数据
  if (!res.ok) {
    throw new Error('获取照片列表失败');
  }
  return res.json();
}

export default async function Photos() {
  const photos = await getPhotos();

  return (
    <div>
      {photos.map((photo) => (
        <div key={photo.id}>{photo.title}</div>
      ))}
    </div>
  );
}

• 异步函数调用必须通过await等待执行完成，才能拿到实际的数组数据
• 服务器组件无需额外hooks，直接用顶层await即可处理异步逻辑
• 客户端组件需要通过useEffect触发请求，并用useState维护数据、加载、错误状态

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