NextJS中使用getServerSideProps获取数据返回Promise {<pending>}的问题

你的核心问题是错误地将getServerSideProps定义在了组件函数内部——这完全不符合Next.js的设计规则，getServerSideProps是Next.js专门用于页面级服务端数据获取的方法，必须定义在组件外部，且只会在服务器端执行，最终将获取到的数据作为props传递给组件。

另外，你直接调用getServerSideProps()时看到Promise {<pending>}，是因为所有async函数调用后都会返回Promise，需要用await处理，但即使加了await，在组件内部这么用也是错误的，因为组件渲染阶段不能直接执行异步操作（会导致渲染异常）。

正确写法 #

步骤1：将getServerSideProps移到组件外部 #

步骤2：组件通过props接收服务端获取的数据 #

步骤3：处理路由参数的边界情况（比如参数未加载时的兼容） #

import { useRouter } from 'next/router';

// 组件定义
const MyHomeComponent = ({ userDetails }) => {
  const router = useRouter();

  // 处理路由参数未就绪的情况（比如页面刚加载时）
  if (router.isFallback) {
    return <div>加载中...</div>;
  }

  // 渲染获取到的数据
  return (
    <div>
      <h1>用户详情</h1>
      <p>ID: {userDetails.id}</p>
      <p>名称: {userDetails.name}</p>
      {/* 根据你的数据结构渲染其他内容 */}
    </div>
  );
};

// 必须定义在组件外部的getServerSideProps
export async function getServerSideProps(context) {
  // 从context中获取路由参数，而不是在组件内部用useRouter
  const { userId, tagIds } = context.query;

  // 调用GraphQL接口获取数据
  const data = await graphqlClient.query({
    query: GET_DATA,
    variables: {
      userId: Number(userId),
      tagIds: tagIds,
    },
  });

  // 将数据作为props返回给组件
  return {
    props: {
      userDetails: data.data.userDetails,
    },
  };
}

export default MyHomeComponent;

关键说明 #

• getServerSideProps会在每次请求时在服务器端执行，获取数据后通过props传递给组件，组件直接使用即可，无需在内部处理异步逻辑。
• 路由参数要从getServerSideProps的context.query中获取，而不是在组件内部用useRouter——因为getServerSideProps运行在服务器端，无法访问客户端的useRouter钩子。
• 如果需要处理页面加载时的状态（比如参数还未就绪），可以用router.isFallback来显示加载提示。

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