TypeError：无法读取未定义的属性（读取“用户”）答案

【问题标题】：TypeError: Cannot read properties of undefined (reading 'user')TypeError：无法读取未定义的属性（读取“用户”）
【发布时间】：2022-02-07 16:25:39
【问题描述】：

我正在尝试使用 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"

完整代码如下所示，你可以结帐你能解决这个错误吗

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;

【问题讨论】：

标签： reactjs next.js next-auth

【解决方案1】：

我修复了它

  const { data: session } = useSession();

成功了

【讨论】：

【解决方案2】：

变量session 可能未定义。

尝试如下访问以解决此问题

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

【讨论】：

这样更改后我又遇到了一个错误
@NTHIN Error: Image is missing required "src" property. Make sure you pass "src" in props to the next/image` 组件。收到：{"width":"40","height":"40"}` 上述更改后出现此错误
我认为您必须确保 useSession 挂钩始终为您提供图像。或仅在图像存在时渲染Image 组件。或者，您可以传递任何后备图像以防用户没有任何图像src={session?.user?.image || 'http://path-to-fallback-image'}
@NTHIN 它显示同样的错误你能告诉我代码有什么问题吗
你能把codesandbox中的代码提供给我，以便我查看。你确定src 是图像的来源吗，在错误中它说你正在传递其他东西Received: {"width":"40","height":"40"}