使用Supabase useUser Hook在useEffect中首次加载报错问题

问题原因 #

首次页面加载时，useUser() Hook还未完成用户信息的异步获取，返回值为null，此时直接访问user.id会触发TypeError: Cannot read properties of null (reading 'id')错误。刷新页面时，用户信息已被缓存，useUser()能立即返回有效用户对象，因此功能恢复正常。

修复方案 #

1. 给查询函数添加用户存在性校验 #

修改checkFollowStatus函数，先判断user是否存在，再执行数据库查询：

const checkFollowStatus = async () => {
  // 若user未加载完成，直接返回避免报错
  if (!user) return;
  
  const { data, error } = await supabase
    .from("follows")
    .select()
    .eq("user_id", id)
    .eq("follower_id", user.id);
  
  // 注意：data为空数组时代表未关注，需判断长度
  if (!error && data?.length > 0) {
    setFollows(true);
  } else {
    setFollows(false);
  }
};

2. 让Effect监听user的变化 #

将user加入useEffect的依赖数组，这样当user从null变为有效用户对象时，会自动触发查询：

useEffect(() => {
  checkFollowStatus();
}, [user]); // 依赖user，状态更新时重新执行

3. 可选：添加加载状态优化体验 #

在user未加载完成时，显示加载提示，避免页面出现异常：

function User({ props }) {
  const [follows, setFollows] = useState(false);
  const user = useUser();

  // 用户未加载完成时显示加载状态
  if (!user) {
    return <div>加载中...</div>;
  }

  // 后续查询逻辑...
}

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