错误：React Context 在服务器组件中不可用

Question

请帮助我修复此错误：当我在 Next.js 中运行应用程序时，我收到以下消息：

错误：React Context 在服务器组件中不可用

import { useSession } from "next-auth/react";
import prisma from "@/lib/prisma";
import { ChatbotClient } from "./components/chatbot-client";
import { redirect } from "next/navigation";

interface ChatbotIdPageProps {
  params: {
    chatbotId: string;
  };
}

const ChatbotIdPage = async ({ params }: ChatbotIdPageProps) => {
  const { data: session } = useSession();

  if (!session?.user) {
    redirect("/demo");
  }

  const userId = JSON.stringify(session.user);

  const chatbot = await prisma.chatbot.findUnique({
    where: {
      id: params.chatbotId,
      userId: userId,
    },
  });

  return <ChatbotClient initialData={chatbot} />;
};

export default ChatbotIdPage;

Answer 1

因为您在服务器组件中，所以不要只在客户端组件useSession中工作（在顶部），而是使用："use client"getServerSession

\n

import { getServerSession } from "next-auth/next";\nimport { authOptions } from "app/api/auth/[...nextauth]"; // \xe2\x9a\xa0\xef\xb8\x8f Make sure this is the correct path\nimport { useSession } from "next-auth/react";\nimport prisma from "@/lib/prisma";\nimport { ChatbotClient } from "./components/chatbot-client";\nimport { redirect } from "next/navigation";\n\ninterface ChatbotIdPageProps {\n  params: {\n    chatbotId: string;\n  };\n}\n\nconst ChatbotIdPage = async ({ params }: ChatbotIdPageProps) => {\n  const session = await getServerSession(authOptions);\n\n  if (!session?.user) {\n    redirect("/demo");\n  }\n\n  const userId = JSON.stringify(session.user);\n\n  const chatbot = await prisma.chatbot.findUnique({\n    where: {\n      id: params.chatbotId,\n      userId: userId,\n    },\n  });\n\n  return <ChatbotClient initialData={chatbot} />;\n};\n\nexport default ChatbotIdPage;\n

\n

旁注，如果您尝试添加"use client"并坚持使用useSession，则组件功能不能是async，并且您只能在 中获取数据useEffect。

\n

Answer 2

在 Next 13 中，任何使用 React.Context 的东西（甚至是你的库）都需要是客户端组件。您可以通过在页面顶部添加“使用客户端”来实现此目的。

"use client" 
import { useSession } from "next-auth/react";
import prisma from "@/lib/prisma";
import { ChatbotClient } from "./components/chatbot-client";
import { redirect } from "next/navigation";

interface ChatbotIdPageProps {
  params: {
    chatbotId: string;
  };
}

const ChatbotIdPage = async ({ params }: ChatbotIdPageProps) => {
  const { data: session } = useSession();

  if (!session?.user) {
    redirect("/demo");
  }

  const userId = JSON.stringify(session.user);

  const chatbot = await prisma.chatbot.findUnique({
    where: {
      id: params.chatbotId,
      userId: userId,
    },
  });

  return <ChatbotClient initialData={chatbot} />;
};

export default ChatbotIdPage;