Next.js 14.1 SSR数据获取返回undefined问题排查与解决

问题分析 #

从你提供的代码来看，导致数据返回undefined的核心原因有以下几点：

• 变量大小写不匹配：Dashboard组件接收的props是serverData，但传递给Container组件时写成了小写的serverdata，子组件自然拿不到正确数据。
• 未处理未登录场景：如果用户未登录，getServerSession会返回null，此时userId为undefined，直接传入getServer会导致Prisma查询条件无效，甚至触发类型错误。
• 缺少错误处理：getServerSideProps中没有捕获getServer抛出的异常，一旦查询出错会直接导致页面渲染失败。

修复方案 #

1. 修正变量大小写错误

修改Dashboard组件中传递给Container的props名称，保持和接收的serverData一致：

import Container from "./Container";
import { getServerSession } from "next-auth/next";
import { authConfig } from "../../lib/auth";
import { getServer } from "@/app/api/servers";

export const getServerSideProps = async (context) => {
  const session = await getServerSession(context.req, context.res, authConfig);
  const userId = session?.user.id;

  let serverData = [];
  if (userId) {
    try {
      serverData = await getServer(userId);
    } catch (error) {
      console.error("获取服务器数据失败:", error);
      // 可选：这里可以添加错误日志或返回默认数据
    }
  }

  return { props: { serverData } };
};

const Dashboard = ({ serverData }) => {
  return (
    <div className="w-full min-h-full p-4 border-b-2 border-t-2 border-t-white border-b-cyan-100 shadow-lg  mb-8 h-80 min-h-72">
      <div className="w-full h-full flex flex-row gap-5">
        {/* 修正大小写：serverData 而非 serverdata */}
        <Container serverData={serverData} />
      </div>
    </div>
  );
};

export default Dashboard;

2. 完善getServer函数的类型校验

给getServer函数添加参数校验，避免传入undefined导致查询异常：

export const getServer = async (userId?: string) => {
  console.log("getServer", userId);
  if (!userId) {
    console.warn("未提供用户ID，返回空数组");
    return [];
  }
  
  try {
    const servers = await prisma.server.findMany({
      where: {
        userId: userId,
      },
    });
    return servers;
  } catch (error) {
    console.error("获取服务器数据错误:", error);
    throw error;
  }
};

3. 处理未登录用户的重定向（可选）

如果Dashboard页面需要用户登录才能访问，可以在getServerSideProps中添加重定向逻辑：

export const getServerSideProps = async (context) => {
  const session = await getServerSession(context.req, context.res, authConfig);
  
  if (!session) {
    return {
      redirect: {
        destination: "/login",
        permanent: false,
      },
    };
  }

  const userId = session.user.id;
  let serverData = [];
  try {
    serverData = await getServer(userId);
  } catch (error) {
    console.error("获取服务器数据失败:", error);
  }

  return { props: { serverData } };
};

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