Next.js异步获取用户数据无法在return语句渲染如何修复

你当前代码存在3个核心问题，导致无法正常渲染用户数据：

• useSession是React Hook，按照React规则只能在组件顶层作用域调用，不能嵌套在普通异步函数getUser内部执行
• 异步函数getUser返回值是Promise对象，你直接将Promise赋值给user变量时，变量本身存储的是Promise实例而非接口返回的用户数据，所以直接访问user.name会得到undefined，访问不存在的嵌套属性还会抛出类型错误
• 没有使用React状态管理异步返回的用户数据，组件初次渲染时异步请求还未完成，也没有做加载态、空值兜底，自然无法正确渲染内容

• 将useSession移到组件顶层作用域调用，符合Hook使用规则
• 用useState声明用户数据、加载状态变量，用来存储接口返回结果
• 用useEffect监听session加载状态，等session可用后再发起用户信息请求，请求完成后更新状态
• 渲染阶段增加加载态、空数据兜底判断，避免访问不存在的属性报错

修复后的完整代码如下：

import { useSession } from "next-auth/react";
import fetch from "isomorphic-unfetch";
import { useState, useEffect } from "react";

const Sword = () => {
  // 顶层调用Hook获取session状态
  const { data: session, status: sessionStatus } = useSession();
  // 定义状态存储用户数据、加载状态
  const [user, setUser] = useState<any>(null);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    // session仍在加载中时不执行请求
    if (sessionStatus === "loading") return;
    // 未登录无session的场景处理
    if (sessionStatus === "unauthenticated") {
      setLoading(false);
      return;
    }
    // 拉取用户数据
    const fetchUserData = async () => {
      try {
        const res = await fetch(
          `http://localhost:3000/api/${(session?.user as any).id}`
        );
        const data = await res.json();
        setUser(data);
      } catch (err) {
        console.error("获取用户数据失败:", err);
      } finally {
        setLoading(false);
      }
    };

    fetchUserData();
  }, [session, sessionStatus]);

  // 加载中兜底展示
  if (loading) {
    return (
      <div>
        <h1>Sword</h1>
        <p>加载中...</p>
      </div>
    )
  }

  // 无用户数据兜底展示
  if (!user) {
    return (
      <div>
        <h1>Sword</h1>
        <p>暂未获取到用户信息</p>
      </div>
    )
  }

  return (
    <div>
      <h1>Sword</h1>
      <p>Name: {user.name}</p>
    </div>
  );
};

export default Sword;

注意：如果使用Next.js App Router模式，useSession仅可在客户端组件中使用，需要在文件顶部添加'use client'声明。

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