如何通过Prisma从SQL导入数据到React并避免Promise错误

问题描述 #

我尝试将MS SQL数据库中的数据导入React组件，却频繁遇到Promise错误。由于操作涉及异步函数，每次都会收到错误提示，称传入React的是Promise而非实际数组。请问如何解决该问题，实现通过Prisma将数据从TypeScript传入React组件且不触发Promise相关报错？

原代码 #

页面组件代码 #

export const getServerSideProps = async () => {
  const res = await fetch("http://localhost:8081/api/fRED_Market_Yield_10Y");
  const my10y = await res.json();
  return {
    props: { my10y },
  };
};

export function MY10Y({ my10y: [] }) {
  return (
    <div>
      {my10y?.map((p: { DateTime: Key | null | undefined; Value: boolean | ReactChild | ReactFragment | ReactPortal | null | undefined; }) => {
        return (
          <div key={p.DateTime}>
            <p>
              {p.Value}%
            </p>
          </div>
        );
      })}
    </div>
  );
}

API路由代码（pages/api/products.js） #

import { Prisma, PrismaClient } from "@prisma/client";
import { Key, ReactChild, ReactFragment, ReactPortal } from "react";

let prisma: PrismaClient<Prisma.PrismaClientOptions, never, Prisma.RejectOnNotFound | Prisma.RejectPerOperation | undefined>;

prisma = new PrismaClient();

export default async function handle(req: any, res: { json: (arg0: any) => void; }) {
  const my10y = await prisma.fRED_Market_Yield_10Y.findMany();
  res.json(my10y);
}

问题分析与修复方案 #

1. 修复组件参数解构错误（核心问题） #

原代码中MY10Y({ my10y: [] })的写法完全错误，这是把my10y重命名为空数组，会直接覆盖getServerSideProps传入的实际数据，导致组件内部拿到的不是数组而是空数组引用。

正确写法：用解构语法获取props，同时设置默认空数组避免undefined：

export function MY10Y({ my10y = [] }) {
  // 组件逻辑
}

2. 优化类型定义 #

手动写的p类型冗余且不准确，直接用Prisma自动生成的类型更可靠：

import { fRED_Market_Yield_10Y } from "@prisma/client";

// ...

export function MY10Y({ my10y = [] }: { my10y: fRED_Market_Yield_10Y[] }) {
  return (
    <div>
      {my10y.map((p) => (
        <div key={p.DateTime}>
          <p>{p.Value}%</p>
        </div>
      ))}
    </div>
  );
}

3. 简化数据获取流程（可选优化） #

原代码通过fetch调用API路由拿数据，其实可以直接在getServerSideProps里调用Prisma，减少一次网络请求：

import { PrismaClient, fRED_Market_Yield_10Y } from "@prisma/client";

const prisma = new PrismaClient();

export const getServerSideProps = async () => {
  const my10y = await prisma.fRED_Market_Yield_10Y.findMany();
  return {
    props: { my10y },
  };
};

export function MY10Y({ my10y = [] }: { my10y: fRED_Market_Yield_10Y[] }) {
  return (
    <div>
      {my10y.map((p) => (
        <div key={p.DateTime}>
          <p>{p.Value}%</p>
        </div>
      ))}
    </div>
  );
}

4. 修复API路由类型（如果保留API路由） #

给req和res加上Next.js的正确类型，避免使用any：

import { PrismaClient } from "@prisma/client";
import type { NextApiRequest, NextApiResponse } from "next";

const prisma = new PrismaClient();

export default async function handle(req: NextApiRequest, res: NextApiResponse) {
  const my10y = await prisma.fRED_Market_Yield_10Y.findMany();
  res.json(my10y);
}

修复后说明 #

修复后，getServerSideProps会在服务器端异步获取并解析出数组数据，再作为props传入组件。组件内部拿到的是实际数组而非Promise，就能正常用map渲染数据，不会再触发Promise相关报错。

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