Vercel部署Next.js应用遇TypeError: items.map不是函数问题求助

错误信息 #

TypeError: items.map is not a function
at SearchResults (/vercel/path0/.next/server/app/exercises/page.js:568:29)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Error occurred prerendering page "/exercises". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: items.map is not a function
at SearchResults (/vercel/path0/.next/server/app/exercises/page.js:568:29)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

相关代码 #

SearchResults组件 #

import React from "react";
import getAll from "@/lib/getAll";
import ResultItem from "./ResultItem";
import { Exercise } from "@prisma/client";

export default async function SearchResults() {
  const items: Exercise[] = await getAll();
  return (
    <div>
      <div>
        {items.map((item: Exercise) => {
          return (
            <ResultItem
              key={item.id}
              id={item.id}
              title={item.name}
              image={item.image}
            />
          );
        })}
      </div>
    </div>
  );
}

getAll函数 #

export default async function getAll() {
  const res = await fetch(`${process.env.CLIENT_URL}/api/exercises`);
  if (!res.ok) return new Error("Failed to fetch data");
  return res.json();
}

已知情况 #

本地测试及执行next build均无报错，硬编码items变量值可正常渲染，但Vercel部署时预渲染页面出现上述错误。

解决思路 #

• 校验API返回数据格式
  本地与Vercel环境下API返回的数据可能存在差异：本地返回数组，但Vercel上可能返回包裹数组的对象（如{ data: [...] }），或因环境变量错误请求了无效地址，导致返回非数组数据。建议在getAll函数中添加日志打印返回结果，或查看Vercel部署日志中的请求详情。

• 修复错误返回逻辑
  当前getAll在请求失败时返回Error对象，而非数组，预渲染时若请求失败，items会是Error类型，调用map必然报错。修改getAll确保始终返回数组：

  export default async function getAll() {
    try {
      const res = await fetch(`${process.env.CLIENT_URL}/api/exercises`);
      if (!res.ok) {
        console.error("请求失败:", res.status, res.statusText);
        return [];
      }
      const data = await res.json();
      // 兼容API返回对象包裹数组的情况
      return Array.isArray(data) ? data : (data?.data || []);
    } catch (err) {
      console.error("请求异常:", err);
      return [];
    }
  }
  

• 添加运行时类型校验
  TypeScript类型标注仅在编译时生效，无法保证运行时数据类型。在组件中添加校验逻辑：

  export default async function SearchResults() {
    const items = await getAll();
    if (!Array.isArray(items)) {
      console.error("items不是数组:", items);
      return <div>加载失败</div>;
    }
    return (
      <div>
        <div>
          {items.map((item: Exercise) => (
            <ResultItem
              key={item.id}
              id={item.id}
              title={item.name}
              image={item.image}
            />
          ))}
        </div>
      </div>
    );
  }
  

• 检查Vercel环境变量
  确认Vercel项目中CLIENT_URL环境变量是否正确配置，避免因地址错误请求到无效API端点。

• 直接调用数据库查询（替代内部API请求）
  预渲染阶段调用同应用内的API路由可能存在问题，可直接在getAll中使用Prisma查询数据，跳过网络请求：

  import { prisma } from "@/lib/prisma";
  
  export default async function getAll() {
    try {
      return await prisma.exercise.findMany();
    } catch (err) {
      console.error("数据库查询失败:", err);
      return [];
    }
  }
  

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