Prisma/React Query依赖查询遇类型未定义问题，求TypeScript解决方案

配置enabled是否处理了该问题？ #

没有。enabled: !!product仅能控制React Query在product存在时才执行第二个查询，但TypeScript是静态类型检查，无法识别enabled的运行时逻辑——它只会看到你在编写查询参数时，product仍可能为undefined，因此抛出类型错误。

正确的TypeScript适配方式 #

方法1：非空断言（简单直接，需确保逻辑可靠） #

在product后加!，明确告诉TypeScript该值此时必然存在：

const { data: product } = api.product.getUnique.useQuery({ id: pid });

const options = api.option.getAll.useQuery(
  {
    product: product!.productSize,
    region: product!.productRegion,
  },
  { enabled: !!product }
);

注意：仅在enabled逻辑绝对能保证product存在时使用，否则运行时可能出现报错。

方法2：将参数逻辑封装为函数（推荐，更安全） #

TRPC的useQuery支持传入函数作为查询参数，React Query会在enabled为true时才执行该函数，此时product已确定存在，TypeScript会自动推断其类型：

const { data: product } = api.product.getUnique.useQuery({ id: pid });

const options = api.option.getAll.useQuery(
  () => ({
    product: product.productSize,
    region: product.productRegion,
  }),
  { enabled: !!product }
);

方法3：条件渲染（彻底规避类型问题） #

等product加载完成后再渲染第二个查询：

const { data: product } = api.product.getUnique.useQuery({ id: pid });

if (!product) {
  return <div>加载中...</div>;
}

const options = api.option.getAll.useQuery({
  product: product.productSize,
  region: product.productRegion,
});

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