在使用 RTK Query 时，若需根据条件（如用户未登录）跳过请求，直接访问 user.id 会导致运行时错误；正确做法是结合 skipToken 实现类型安全、逻辑清晰的条件请求。
在使用 rtk query 时，若需根据条件（如用户未登录）跳过请求，直接访问 `user.id` 会导致运行时错误；正确做法是结合 `skiptoken` 实现类型安全、逻辑清晰的条件请求。
RTK Query 提供了专门用于“跳过请求”的机制——skipToken，它是一个特殊符号值（Symbol），当传入 query hook 作为参数时，会自动跳过该请求，且不会触发任何副作用或类型报错。这比手动传入 undefined 或硬编码 skip: true 更加健壮和语义化。
✅ 正确用法：使用 skipToken
首先确保已从 @reduxjs/toolkit/query/react 中导入：
import { skipToken } from '@reduxjs/toolkit/query/react';
然后在组件中这样调用：
const { data: carts = [] as ICart[], isFetching, error } =
api.useGetCartProductsQuery(user ? user.id : skipToken);
✅ 优势：
- user 为 null 或 undefined 时，user.id 不会被求值，彻底规避 Cannot read properties of null (reading 'id') 错误；
- skipToken 是 RTK Query 官方支持的跳过信号，类型系统友好（TypeScript 能正确推断返回值为 undefined 状态）；
- 无需额外配置 skip 选项，代码更简洁。
❌ 常见错误写法对比
| 写法 | 问题 |
|---|---|
| api.useGetCartProductsQuery(user.id, { skip: !user }) | user.id 在 skip 判断前已被执行 → 报错 |
| api.useGetCartProductsQuery(user?.id, { skip: !user }) | user?.id 虽安全，但 skip: !user 与参数逻辑冗余，且 undefined 作为参数可能触发非预期行为（如被序列化为 ""） |
| api.useGetCartProductsQuery(user ? user.id : undefined) | undefined 不是合法的 query 参数（除非 API endpoint 显式允许），可能引发警告或缓存异常 |
? 补充建议
- 若需在跳过状态下统一处理 UI（如显示“请先登录”），可结合 isFetching 和 data === undefined 判断：
if (!user) { return <div>请先登录以查看购物车</div>; } - skipToken 同样适用于带多个参数的 queryFn 场景（如 useGetProductQuery([productId, skipToken])），只要任一参数为 skipToken，整个请求即被跳过。
总之，skipToken 是 RTK Query 中实现条件请求的首选、推荐且最安全的方式——它将“跳过逻辑”内聚于参数层，兼顾可读性、健壮性与类型安全性。
