使用useQuery获取数据后无法访问其属性的问题排查

可能的原因及解决方案 #

1. 数据存在嵌套结构

这是最常见的情况：console.log(data)展开后看到的是内层用户数据，但实际data是一个包裹对象。比如后端返回的结构是：

{
  data: {
    id: 1,
    name: "Eduard",
    role: "admin"
  }
}

此时直接访问data.role会返回undefined，需要访问data.data.role。

验证方法：
在控制台执行console.log(Object.keys(data))，查看实际的键名，确认是否存在外层包裹的键（比如data、user等）。

解决方法：
调整useQuery的查询函数，直接返回内层数据：

const { data } = useQuery(['user', userId], async () => {
  const res = await fetch(`/api/users/${userId}`);
  const result = await res.json();
  // 返回内层的用户数据，根据实际结构调整
  return result.data; 
});

2. 接口定义与实际数据不匹配

检查IUser接口的属性名是否和后端返回的完全一致，包括大小写：

// 错误示例：接口用role，但实际返回的是Role
interface IUser {
  id: number;
  name: string;
  role: string;
}

// 实际后端返回
{
  id: 1,
  name: "Eduard",
  Role: "admin"
}

这种情况下TypeScript的类型提示会显示role存在，但实际运行时访问data.role会是undefined。

解决方法：
修改接口定义匹配实际数据，或者在查询函数中转换键名：

return {
  ...result.data,
  role: result.data.Role // 统一键名
};

3. 数据序列化/缓存问题

NextJS在SSR/SSG过程中，数据序列化可能导致属性丢失（比如非JSON安全的类型），或者react-query的缓存存储了旧的、结构不正确的数据。

验证方法：
临时禁用react-query的缓存测试：

const { data } = useQuery(['user', userId], fetchUser, {
  cacheTime: 0,
  staleTime: 0
});

或者用JSON.parse(JSON.stringify(data))序列化后查看属性是否存在。

解决方法：

• 确保后端返回的是标准JSON格式数据，没有包含函数、Symbol等无法序列化的类型。
• 清除react-query的缓存：开发环境可通过react-query devtools手动清除，或者调用queryClient.invalidateQueries(['user', userId])。

4. 异步加载时机问题（可能性较低）

虽然你提到console.log(data)能看到完整数据，但如果是在组件渲染的早期阶段访问属性，可能数据还未完全就绪。可以通过条件渲染确保数据加载完成后再访问属性：

if (!data) return <div>Loading...</div>;

// 确认数据存在后再访问属性
return <div>User Role: {data.role}</div>;

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