如何让React接收Prisma获取的Promise数据？报错求助

Exception has occurred: Error: Abort fetching component for route: "/dashboard/bond-market"
at handleCancelled (webpack-internal:///./node_modules/next/dist/shared/lib/router/router.js:558:19)
at _callee6$ (webpack-internal:///./node_modules/next/dist/shared/lib/router/router.js:2157:17)
at tryCatch (webpack-internal:///./node_modules/next/dist/compiled/regenerator-runtime/runtime.js:45:40)
at Generator.invoke [as _invoke] (webpack-internal:///./node_modules/next/dist/compiled/regenerator-runtime/runtime.js:274:22)
at prototype. [as next] (webpack-internal:///./node_modules/next/dist/compiled/regenerator-runtime/runtime.js:97:21)
at asyncGeneratorStep (webpack-internal:///./node_modules/next/dist/shared/lib/router/router.js:72:24)
at _next (webpack-internal:///./node_modules/next/dist/shared/lib/router/router.js:94:9)

问题根源 #

1. getServerSideProps被错误放在API路由文件中，Next.js仅会识别页面组件（pages/目录下文件）中的该函数，无法触发数据获取逻辑
2. 组件MY10YTest被传入空数组[]，未实际使用Prisma返回的异步数据
3. Props类型定义错误，将数值类型的Value定义为React节点类型，可能导致渲染异常

修复步骤 #

1. 修正组件类型与逻辑 #

修改playIndex.tsx，调整Props类型匹配Prisma返回的数据结构：

import { Key } from "react";

// 定义与Prisma表结构匹配的数据类型
export interface MY10YItem {
  DateTime: Key | null | undefined;
  Value: number | null | undefined;
}

export function MY10YTest(props: { my10y: MY10YItem[] }) {
  return (
    <div>
      {props.my10y.map((p) => (
        <div key={p.DateTime}>
          <p>{p.Value ? `${p.Value}%` : "N/A"}</p>
        </div>
      ))}
    </div>
  );
}

2. 在页面组件中添加数据获取逻辑 #

将getServerSideProps移到bond-market.tsx页面组件中，直接调用Prisma获取数据（减少不必要的API请求）：

import { ReactElement } from 'react';
import { Grid } from '@mui/material';
import Layout from 'layout';
import Page from 'components/Page';
import AnalyticsDataCard from 'components/cards/statistics/AnalyticsDataCard';
import MY01YChart from 'sections/dashboard/analytics/MY01YChart';
import MY02YChart from 'sections/dashboard/analytics/MY02YChart';
import MY10YChart from 'sections/dashboard/analytics/MY10YChart';
import { MY10YTest, MY10YItem } from 'pages/api/playIndex';
import { prisma } from 'lib/prisma'; // 后续会创建全局Prisma实例

const DashboardAnalytics = ({ my10y }: { my10y: MY10YItem[] }) => {
  return (
    <Page title="Bond Market Dashboard">
      <Grid container rowSpacing={4.5} columnSpacing={3}>
        {/* 其他卡片保持不变 */}
        <Grid item xs={12} sm={6} md={4} lg={3}>
          <AnalyticsDataCard title="Market Yield 10-Year Treasury Bonds-Experimental" count="16000" percentage={-2} isLoss={true}>
            {/* 传递实际获取的数据 */}
            <MY10YTest my10y={my10y} />
          </AnalyticsDataCard>
        </Grid>
        <Grid item md={8} sx={{ display: { sm: 'none', md: 'block', lg: 'none' } }} />
      </Grid>
    </Page>
  );
};

// 页面专属的数据获取逻辑，Next.js会在服务端执行
export const getServerSideProps = async () => {
  const my10y = await prisma.fRED_Market_Yield_10Y.findMany();
  return {
    props: { my10y },
  };
};

DashboardAnalytics.getLayout = function getLayout(page: ReactElement) {
  return <Layout>{page}</Layout>;
};

export default DashboardAnalytics;

3. 优化Prisma客户端实例（可选） #

创建全局Prisma实例避免重复初始化，新建lib/prisma.ts：

import { PrismaClient } from '@prisma/client';

const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };

export const prisma = globalForPrisma.prisma || new PrismaClient();

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

4. （可选）通过API路由获取数据 #

如果坚持使用API路由，修改页面组件的getServerSideProps即可：

export const getServerSideProps = async () => {
  const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:8081'}/api/my10y`);
  if (!res.ok) throw new Error('数据获取失败');
  const my10y = await res.json();
  return { props: { my10y } };
};

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