Question

Next-auth：尽管已从 getServerSideProps 传递至页面的属性，但该属性仍未定义

2022-03-30

2857

reactjs typescript next.js next-auth

我正在尝试将从 getSession 获取的会话（使用 next-auth ）作为道具传递到页面。我知道我可以在组件中使用 useSession() ，但根据我的理解，这也应该可以工作，我不明白为什么它不起作用。

这似乎与这个问题中的问题类似，但没有答案。

这是我非常基本的 pages/settings.tsx :

import { Card, CardContent, Typography } from "@mui/material";
import { User } from "@prisma/client";
import { GetServerSideProps, NextPage } from "next";
import { getSession } from "next-auth/react";

interface SettingsProps {
  user: User,
}

const Settings : NextPage<SettingsProps> = ({user})=>{
  // in here, user is always undefined...
  return (
    <Card>
      <CardContent>      
        <Typography variant="h3">Settings</Typography>
        <Typography>UserId: {user.id}</Typography>
        <Typography>Created: {(new Date(user.createdAt)).toLocaleDateString()}</Typography>
      </CardContent>
      
    </Card>
  );
};

export const getServerSideProps: GetServerSideProps<SettingsProps> =  async (context) =>{
  const session = await getSession(context);

  if (!session) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    };
  }

  console.log(session.user); // this works and logs the user

  return {
    props: { user: session.user },
  };
};

export default Settings;

我已经像这样增强了 next-auth 会话类型（ types/next-auth.d.ts ）：

import { User } from "@prisma/client";
import NextAuth from "next-auth";

declare module "next-auth" {
  /**
   * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
   */
  interface Session {
    user: User
  }
}

根据我对 React 和 NextJs 的理解，上面的代码应该可以完美运行，但是当访问页面时我得到

TypeError: Cannot read properties of undefined (reading 'id')
  13 |       <CardContent>      
  14 |         <Typography variant="h3">Settings</Typography>
> 15 |         <Typography>UserId: {user.id}</Typography>
     |                                  ^
  16 |         <Typography>Created: {(new Date(user.createdAt)).toLocaleDateString()}</Typography>
  17 |       </CardContent>
  18 |

我做错了什么？

Answer 1

我遇到了同样的问题，但纯属运气好解决了。

似乎 Next.js 通过其 pageProps 在页面中使用了 session 属性。因此，当我们尝试直接从 getServerSideProps 传递 session 时，由于某种原因，它在客户端组件上未定义。

简而言之，只需从 session 返回用户，或将 session 变量重命名为其他名称。

这是我在需要 SSR 身份验证保护的应用程序中使用的模式：

export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
  const session = await unstable_getServerSession(req, res, authOptions);
  const user = session?.user;

  if (!user) {
    return {
      redirect: {
        destination: "/",
        permanent: false,
      },
    };
  }

  return {
    props: {
      user,
    },
  };
};

Answer 2

尽管如果您在会话中有一个用户对象，并且在用户对象中有一个 id，那么一切对我来说都很好，正如您早些时候提到的那样。因此，您可以使用可选更改。

<Typography variant="h3">Settings</Typography>
 <Typography>UserId: {user?.id}</Typography>

Answer 3

nextauth 文档 接口 {user: User & DefaultSession['user']>

Mbob05

2022-03-30