Next.js中React子元素报错：[object Promise]问题求助

你遇到的Objects are not valid as a React child (found: [object Promise])错误，核心原因是React组件函数不能是异步的——异步函数执行后返回的是Promise对象，而React期望组件返回JSX元素或null，无法直接渲染Promise。

你的Prisma实例优化代码是没问题的，问题出在组件本身的写法上。下面给出几种适配Next.js的解决方案：

方案1：静态生成（getStaticProps） #

适合数据不需要实时更新的场景，构建时就获取数据并生成静态页面：

import prisma from '../path/to/your/prisma/client'; // 引入优化后的Prisma实例

// 同步组件，接收props中的数据
export default function Dbtest({ edus }) {
  return (
    <div className="h-screen">
      {edus.map((edu) => (
        <div key={edu.id}>{edu.board}</div>
      ))}
    </div>
  );
}

// 构建阶段执行，获取数据传递给组件
export async function getStaticProps() {
  const edus = await prisma.education.findMany();
  // 序列化Prisma返回的代理对象为普通JS对象，避免客户端序列化问题
  return {
    props: {
      edus: JSON.parse(JSON.stringify(edus)),
    },
    revalidate: 60, // 可选：每60秒自动重新生成页面（增量静态再生）
  };
}

方案2：服务器端渲染（getServerSideProps） #

适合每次请求都需要最新数据的场景，每次请求时在服务器端获取数据：

import prisma from '../path/to/your/prisma/client';

export default function Dbtest({ edus }) {
  return (
    <div className="h-screen">
      {edus.map((edu) => (
        <div key={edu.id}>{edu.board}</div>
      ))}
    </div>
  );
}

// 每次请求时执行，获取最新数据
export async function getServerSideProps() {
  const edus = await prisma.education.findMany();
  return {
    props: {
      edus: JSON.parse(JSON.stringify(edus)),
    },
  };
}

方案3：客户端动态获取数据 #

如果需要在客户端（比如用户交互后）加载数据，使用React的useState和useEffect钩子：

import { useState, useEffect } from 'react';
import prisma from '../path/to/your/prisma/client';

export default function Dbtest() {
  const [edus, setEdus] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 定义异步数据获取函数
    const fetchEducationData = async () => {
      try {
        const data = await prisma.education.findMany();
        setEdus(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchEducationData();
  }, []); // 空依赖数组确保只执行一次

  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error}</div>;

  return (
    <div className="h-screen">
      {edus.map((edu) => (
        <div key={edu.id}>{edu.board}</div>
      ))}
    </div>
  );
}

补充说明 #

• 序列化Prisma返回对象是因为Prisma返回的是带有内部代理的对象，直接传递给客户端可能会出现循环引用或序列化失败的问题，JSON.parse(JSON.stringify(edus))可以将其转换为普通JavaScript对象。
• 你之前优化的Prisma实例创建代码可以继续使用，它能避免开发环境下重复创建PrismaClient实例导致的警告。

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