Next.js 13 App Router中Prisma对象映射失败求助

你的问题出在两个核心点：

1. 异步函数getAllUsers()直接调用返回的是Promise对象，不是实际的用户数组，Promise没有map方法，自然会报错。
2. 你的getAllUsers函数返回的是包含users数组的对象（{ users }），就算拿到Promise的结果，也得先取出里面的users数组才能用map。

下面给你两种可行的修改方案，根据组件类型选择：

方案1：用Next.js服务器组件（推荐，适配你的page.tsx场景） #

Next.js 13+的App Router中，page.tsx默认是服务器组件，支持直接在组件里用async/await获取数据，不用额外状态管理：

第一步：调整数据获取函数（可选，也可跳过，后续调用时解构） #

把getAllUsers改成直接返回用户数组：

export async function getAllUsers(){
  const prisma = new PrismaClient()
  const users = await prisma.user.findMany()
  return users // 直接返回数组，而非包含数组的对象
}

第二步：修改组件为异步函数 #

// 如果没改getAllUsers，就写成 const { users } = await getAllUsers()
export default async function AllUser() {
  const users = await getAllUsers()

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1> All User </h1>
      {/* 记得加ul标签，li不能直接放在main下，符合HTML语义化要求 */}
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <div>{user.name}</div>
            <div>{user.email}</div>
          </li>
        ))}
      </ul>
    </main>
  )
}

方案2：客户端组件（如果组件需要交互，加了'use client'指令） #

如果是客户端组件，得用useState存储数据，useEffect触发异步请求：

'use client'

import { useState, useEffect } from 'react'
import { getAllUsers } from './你的函数路径'

export default function AllUser() {
  const [users, setUsers] = useState([])

  useEffect(() => {
    const fetchUsers = async () => {
      // 如果没改getAllUsers，这里要解构出users数组
      const { users: fetchedUsers } = await getAllUsers()
      setUsers(fetchedUsers)
    }
    fetchUsers()
  }, [])

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1> All User </h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <div>{user.name}</div>
            <div>{user.email}</div>
          </li>
        ))}
      </ul>
    </main>
  )
}

额外优化建议 #

每次调用new PrismaClient()可能会创建多个客户端实例，建议在项目里单独封装Prisma客户端（比如lib/prisma.ts）：

// lib/prisma.ts
import { PrismaClient } from '@prisma/client'

const prisma = global.prisma || new PrismaClient()

if (process.env.NODE_ENV !== 'production') global.prisma = prisma

export default prisma

然后在getAllUsers里导入使用：

import prisma from '@/lib/prisma'

export async function getAllUsers(){
  const users = await prisma.user.findMany()
  return users
}

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