Next.js中useSession获取session后访问session.user报错排查

这个错误的核心原因是useSession 是异步获取会话数据的：组件首次渲染时，session 的值是 undefined，此时直接访问 session.user 就会触发「读取 undefined 属性」的类型错误。

你第一次打印 session 时能看到完整会话，是因为组件后续重新渲染时，session 数据已经加载完成，控制台会保留之前的日志，但首次渲染时的 session 其实是 undefined——你可以给打印语句加上渲染标识（比如console.log('渲染次数X', session)），就能清楚看到首次渲染时 session 的值确实是 undefined。

可以通过以下几种方式避免这个错误：

• 使用可选链操作符：直接在访问属性时加上 ?.，当 session 为 undefined 时会自动返回 undefined，不会报错：

  console.log(session?.user);
  

• 根据 session 状态做条件判断：useSession 返回的 status 有 loading、authenticated、unauthenticated 三种状态，我们可以在状态为 authenticated 时再访问 session.user：

  export default function Sidebar() {
    const { data: session, status } = useSession();
  
    if (status === "loading") {
      return <div>加载中...</div>;
    }
  
    if (status === "authenticated") {
      console.log(session.user);
      return (
        // 渲染包含用户项目列表的侧边栏
      );
    }
  
    // 未登录状态的渲染
    return <div>请登录</div>;
  }
  

• 给 session 设置默认值：通过解构赋值给 session 设置空对象默认值，避免 undefined：

  const { data: session = {}, status } = useSession();
  console.log(session.user); // 此时session至少是空对象，不会报错，user不存在时返回undefined
  

内容的提问来源于stack exchange，提问作者Gabriel Schemoul