为什么我无法访问 NextJs 页面中返回语句之前存在的会话数据

Question

试图了解这是如何工作的。

我在NextJS中有一个会话。我可以在页面视图内访问，没有问题。

但是，如果我试图在return语句之前访问其中的任何数据，它会返回未定义的数据，即使当它呈现时变量在页面中。

有人能告诉我为什么会这样吗？

页面的示例代码

const { data: session } = useSession();
if(session) { // Never runs, always evaluates as false
console.log("USER ID : " + session.userId); 
}
console.log("USER ID : " + session?.userId); // Undefined
// @ts-ignore
if(session) {
return (
<>
<div className="min-h-full">
<nav className="bg-fadedFadedPurple">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16 w-full">
<div className="flex items-center w-full h-full">
<div className="flex-shrink-0">
/*perfectly fine*/  <Link className="hover:cursor-pointer" href={`/app/${session.userId}/dashboard`}>

Answer 1

Next.js中的useSession仅在初始加载状态后定义，请参阅：https://next-auth.js.org/getting-started/client#example-1

您正试图在此加载状态之前检查会话，因此它是未定义的，不符合您的条件。

稍后，当它在页面中呈现时，钩子会将会话作为其过去初始加载状态

这是您试图做的，但需要在加载状态时回调

const session = useSession({
required: true,
onUnauthenticated() {
// The user is not authenticated, handle it here.
},
})
if (status === "loading") {
//if(session) { //this is your Undefined
console.log("USER ID : " + session?.userId); 
//}
return "Loading or not authenticated..."
}
//if(session) { // this is if the session has been loaded
console.log("USER ID : " + session.userId); 
//}
return "User is logged in"
}

此外，如果你想参加会议，你必须等待的电话

const session = await getSession()

根据文件https://next-auth.js.org/getting-started/client#getsession

希望这能帮助你理解为什么你的代码不能正常工作