TypeError: Cannot read properties of undefined (reading 'user')

Question

我正在尝试使用 Nextjs 创建 Facebook 克隆并创建 nextjsAuth 并配置登录现在我试图将我的 Facebook 个人资料图片放入我的克隆中并显示此错误我尝试运行但是这个显示错误，我不知道该怎么办，谁能解决这个问题，请

pages\components\Header.js (69:23) @ Header

  67 | onClick={signOut}
  68 | className="rounded-full cursour-pointer"
> 69 | src={session.user.image}
     |             ^
  70 | width="40"
  71 | height="40"
  72 | layout="fixed"

full code is shown below you can checkout can you solve this error

import React from "react";

import Image from "next/image";
import {
  BellIcon,
  ChatIcon,
  ChevronDownIcon,
  HomeIcon,
  UserGroupIcon,
  ViewGridIcon,
} from "@heroicons/react/solid";
import {
  FlagIcon,
  PlayIcon,
  SearchIcon,
  ShoppingCartIcon,
} from "@heroicons/react/outline";

import HeaderIcon from "./HeaderIcon";
import { signOut, useSession } from "next-auth/react";

function Header() {
  const {session} = useSession();

  return (
    <div
      className="sticky top-0 z-50 bg-white 
    flex items-center p2
     lg:px-5 shadow-md"
    >
      <div className="flex items-center">
        {/* Left */}

        <Image
          alt="facebook"
          src="https://links.papareact.com/5me"
          width={40}
          height={40}
          layout="fixed"
        />
        <div className="flex ml-2 item-center rounded-full bg-gray-100 p-2">
          <SearchIcon className="h-6 text-gray-600" />
          <input
            className=" hidden md:inline-flex flex ml-2 items-center bg-transparent outline-none 
            placeholder-gray-502 flex-shrink"
            type="text"
            placeholder="Search Facebook"
          />
        </div>
      </div>

      {/* Center */}
      <div className="flex justify-center flex-grow">
        <div className="flex space-x-6 md:space-x-2  ">
          <HeaderIcon active Icon={HomeIcon} />
          <HeaderIcon Icon={FlagIcon} />
          <HeaderIcon Icon={PlayIcon} />
          <HeaderIcon Icon={ShoppingCartIcon} />
          <HeaderIcon Icon={UserGroupIcon} />
        </div>
      </div>

      {/* Right */}
      <div className="flex items-center sm:space-x-2 justify-end">
        {/* Profile pic */}
        <Image
          onClick={signOut}
          className="rounded-full cursour-pointer"
          src={session.user.image}
          width="40"
          height="40"
          layout="fixed"
        />
        <p className="whitespace-nowrap font-semibold pr-3">Asram Ahamed</p>
        <ViewGridIcon className="icon" />
        <ChatIcon className="icon" />
        <BellIcon className="icon" />
        <ChevronDownIcon className="icon" />
      </div>
    </div>
  );
};

export default Header;

Answer 1

变量session可能未定义。

尝试像下面这样访问来解决这个问题

<Image
    onClick={signOut}
    className="rounded-full cursour-pointer"
    src={session?.user?.image}
    width="40"
    height="40"
    layout="fixed"
/>

Answer 2

我用

修复了它

  const { data: session } = useSession();

成功了

Answer 3

刚刚解决了这个问题。您正在客户端获取会话，因此在获取客户端数据时存在延迟 - 这会导致错误，因为会话在获取之前是 'null'。

要解决它，请尝试使用以下示例在服务器端加载会话：

import { useSession, getSession } from 'next-auth/react'

const Example = () => {
   const { data: session } = useSession();
   console.log(session)
...
   <div><Image src={session.user.image} /></div>
...
}

export async function getServerSideProps(context) {
    return {
        props: {
            session: await getSession(context)
        },
    }
  }

export default Example;

TypeError: Cannot read properties of undefined (reading 'user')

TypeError: Cannot read properties of undefined (reading 'user')

reactjs

next.js

next-auth