页面重载时session.user.id返回null的解决方法（Next.js+React）

问题原因 #

页面重载时，useSession是异步获取会话信息的，初始渲染阶段session还处于未加载完成的状态，此时session.user为null，直接访问session.user.id会触发报错。同时你的useEffect依赖为空数组，只会执行一次，后续session加载完成后也不会重新触发数据请求。

修复方案 #

1. 增加会话状态判断 + 更新useEffect依赖

修改代码，先判断session.user是否存在再执行请求；同时把session加入useEffect的依赖数组，确保会话状态更新时重新获取数据：

const session = useSession();
const supabase = useSupabaseClient();

useEffect(() => {
  // 先校验会话状态，避免空值访问报错
  if (!session || !session.user) return;

  const fetchProfile = async () => {
    try {
      const { data, error } = await supabase
        .from('profiles')
        .select()
        .eq('id', session.user.id);
      
      if (error) throw error;
      if (data.length) {
        setProfile(data[0]);
        console.log(data[0]); // 直接打印返回数据，setProfile是异步操作，无法立即拿到更新后的profile值
      }
    } catch (err) {
      console.error('获取用户信息失败:', err);
    }
  };

  fetchProfile();
}, [session, supabase]); // 加入session和supabase作为依赖，状态变化时重新执行

2. 可选：使用Supabase Auth状态监听（更可靠）

如果需要更实时的会话状态同步，可以用Supabase的onAuthStateChange监听用户登录状态变化：

const session = useSession();
const supabase = useSupabaseClient();

useEffect(() => {
  const unsubscribe = supabase.auth.onAuthStateChange((event, session) => {
    if (session?.user) {
      // 会话有效时拉取用户信息
      supabase.from('profiles')
        .select()
        .eq('id', session.user.id)
        .then(({ data, error }) => {
          if (!error && data.length) {
            setProfile(data[0]);
          }
        })
        .catch(err => console.error(err));
    } else {
      // 会话失效时清空用户信息
      setProfile(null);
    }
  });

  // 组件卸载时取消监听，避免内存泄漏
  return () => unsubscribe();
}, [supabase]);

额外注意点 #

• setProfile是异步操作，直接在setProfile后console.log(profile)会拿到更新前的状态，若要查看最新值，可打印返回的data[0]，或新增useEffect监听profile的变化。
• 确认你的Supabase客户端配置中开启了会话持久化（默认已开启，可检查supabaseClient初始化代码）。

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