Next Js 13.4.4 应用程序路由面临问题类型错误：类型 '({ params }: Props) => Promise<Element | null>' 无法分配给类型 'FC<Props>'

Question

“下一个”：“^13.4.3”，应用程序路线 “反应”：“^18.2.0”， "react-dom": "^18.2.0",

我在编译页面时收到此错误消息：

Type error: Type '({ params }: Props) => Promise<Element | null>' is not assignable to type 'FC<Props>'. Type 'Promise<Element | null>' is missing the following properties from type 'ReactElement<any, any>': type, props, key

/博客/[id]/page.tsx

import React, { FC } from 'react'

type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}

async function getData(id: string) {
  const res = await fetch(
    `http://localhost:9090/v1/blog/${id}`,
    {
      next: { revalidate: 3600 },
    }
  )

  if (!res.ok) {
    throw new Error('Failed to fetch data')
  }
  return res.json()
}

const page: FC<Props> = async ({ params, searchParams }) => {
  const { id } = params
  const { data: Offering } = await getData(id)

我希望通过在服务器上获取数据然后将内容发送到客户端来进行服务器端渲染

Answer 1

您遇到的错误是由于组件的预期类型与实际返回类型不匹配造成的。在 Next.js 中，页面组件应该是同步的，而不是直接返回 Promise。相反，他们应该同步返回一个 JSX 元素。

要实现服务器端渲染（SSR）并在渲染页面之前获取数据，可以使用 Next.js 的

getServerSideProps

函数。此函数允许您在服务器上获取数据并将其作为道具传递给您的组件。

以下是如何重构代码以使用

getServerSideProps

:

import { GetServerSideProps, NextPage } from 'next';

type Props = {
  id: string;
  data: any; // Adjust the type according to your fetched data structure
};

const Page: NextPage<Props> = ({ id, data }) => {
  // Your component logic here
};

export const getServerSideProps: GetServerSideProps<Props> = async ({ params }) => {
  const { id } = params || {};
  if (!id) {
    return {
      notFound: true,
    };
  }

  try {
    const res = await fetch(`http://localhost:9090/v1/blog/${id}`);
    if (!res.ok) {
      throw new Error('Failed to fetch data');
    }
    const data = await res.json();
    
    return {
      props: {
        id,
        data,
      },
    };
  } catch (error) {
    console.error('Error fetching data:', error);
    return {
      notFound: true,
    };
  }
};

export default Page;

在这个重构的代码中：

• 我们定义了

  NextPage

  组件类型而不是 FC，因为我们使用的是 Next.js。
• 我们定义了一个

  Props

  类型，其中包含页面组件的预期属性。
• 我们使用

  getServerSideProps

  函数来获取服务器上的数据。它将获取的数据作为道具返回给组件。

• Page

  组件接收获取的数据作为道具并相应地渲染它。

通过使用

getServerSideProps

，您可以确保数据获取在服务器上完成，从而启用服务器端渲染并改进 Next.js 应用程序的 SEO 和初始加载时间。