如何为Shopify App Bridge的resourcePicker缩小Product返回类型？

核心问题原因 #

当调用shopify.resourcePicker({ type: 'product' })时，TypeScript无法根据传入的type参数自动缩小返回值类型——因为该函数的返回类型是针对所有可选类型（product/variant/collection）的联合类型，即使指定了product类型，TS依然会保留联合类型的宽泛约束。你尝试用Extract失败，大概率是因为返回类型里的__typename并非字面量类型'Product'，而是更宽泛的string类型，导致无法匹配。

可行解决方案 #

1. 直接类型断言（最简便）

既然明确指定了选择器类型为product，可以直接对返回结果做类型断言：

const pickerResult = await shopify.resourcePicker({ type: 'product' });
// 断言选中的第一项为Product类型（允许多选则为Product数组）
const selectedProduct = pickerResult?.[0] as Product;
// 存入React状态
setProduct(selectedProduct);

2. 自定义类型守卫（更安全）

写一个类型守卫函数，让TypeScript自动识别并缩小类型：

// 定义类型守卫
function isProduct(item: unknown): item is Product {
  const candidate = item as { __typename?: string };
  return candidate?.__typename === 'Product';
}

// 使用示例
const pickerResult = await shopify.resourcePicker({ type: 'product' });
if (pickerResult?.length && isProduct(pickerResult[0])) {
  // 此处pickerResult[0]的类型已自动缩小为Product
  setProduct(pickerResult[0]);
}

3. 封装约束函数（复用性强）

封装一个专门针对产品选择器的函数，提前约束返回类型：

async function openProductResourcePicker() {
  const result = await shopify.resourcePicker({ type: 'product' } as const);
  // 强制约束返回类型为Product数组或undefined
  return result as Array<Product> | undefined;
}

// 调用封装后的函数
const products = await openProductResourcePicker();
if (products) {
  setProduct(products[0]);
}

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