使用Supabase获取登录用户信息失败，支付数据正常的问题排查

我正在关联当前登录用户的users表和payments表获取数据，支付数据能正常打印并渲染，但无法获取用户相关信息。目标是拿到包含用户id和name的对象，用于登录后仪表盘的个人问候。相关代码如下：

const [sidebarOpen, setSidebarOpen] = useState(false)
const [userId, setUserId] = useState("")
const [date, setDate] = useState("")
const [investmentAmount, setInvestmentAmount] = useState(null)
const [payments, setPayments] = useState([])
const [userInfo, setUserInfo] = useState({})

const router = useRouter()

useEffect(() => {
 const getUser = async () => {
  const user = await supabase.auth.getUser();
  console.log(user)
  if (user) {
    const userId = user.data.user?.id
    setUserId(userId)
  }
 };
 getUser()
},[])


useEffect(()=> {
  const getUserInfo = async () => {
    try {
    const {data, error} = await supabase
    .from('users')
    .select()
    .eq("id", userId)
    if (error) throw error;
    console.log("userData: ", data)
    setUserInfo(data)
  } catch (error){
    console.log("error:",error)
  };
  if (userId) {
    getUserInfo()
  }  
  } 
},[userId])

useEffect(()=> {
  const getPaymentData = async () => {
    try {
      const { data, error } = await supabase
      .from('payments')
      .select()
      .eq("user_id", userId)
      if (error) throw error;
      console.log("data: ", data)
      setPayments(data)
    } catch (error){
      console.log("error: ",error)
    }
  };
    if (userId){
      getPaymentData();
    }
},[userId])

问题诊断 #

1. 查询返回格式不匹配：Supabase的select()默认返回数组类型数据，但你把它直接赋值给了初始为对象的userInfo状态。后续尝试访问userInfo.name时，会因为数组没有该属性而拿不到值。
2. 潜在的RLS权限限制：如果users表开启了行级安全（RLS），但没有配置允许已认证用户读取自身数据的规则，会导致查询无返回结果。
3. 用户ID一致性问题：需要确认users表中的id字段，是否和Supabase Auth返回的用户ID完全一致（注意大小写、格式差异）。

解决方案 #

1. 修正查询结果处理逻辑 #

因为是查询单个用户的信息，要么用.single()强制返回单个对象，要么从返回的数组中取出第一个元素：

方法一：使用.single()

const getUserInfo = async () => {
  try {
    const {data, error} = await supabase
      .from('users')
      .select('id, name') // 只查询需要的字段，优化性能
      .eq("id", userId)
      .single(); // 强制返回单个对象，无匹配时会抛出错误
    if (error) throw error;
    console.log("userData: ", data)
    setUserInfo(data)
  } catch (error){
    console.log("error:",error)
  };
};

方法二：处理数组结果

const getUserInfo = async () => {
  try {
    const {data, error} = await supabase
      .from('users')
      .select('id, name')
      .eq("id", userId);
    if (error) throw error;
    console.log("userData: ", data)
    // 从数组中取第一个元素赋值给userInfo
    if (data && data.length > 0) {
      setUserInfo(data[0]);
    } else {
      console.log("未找到对应用户信息");
    }
  } catch (error){
    console.log("error:",error)
  };
};

2. 检查并配置RLS规则 #

登录Supabase控制台，进入Authentication > Policies，为users表添加读取权限规则，示例：

CREATE POLICY "已认证用户可读取自身信息" ON public.users
FOR SELECT USING (auth.uid() = id);

3. 验证用户ID一致性 #

在getUser函数中打印完整的user.data.user对象，确认id的值，同时检查users表中是否存在该ID对应的记录。

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