Shopify Storefront API获取产品异常：无报错但页面无数据且productsList为never[]

核心问题分析 #

你提到的never[]是TypeScript类型推断的结果，本身不会直接导致页面无数据，但它暴露了代码中类型定义缺失的问题，同时实际请求可能存在以下几个关键问题：

1. 缺失有效的Storefront Access Token #

你的shopifyApi.js中X-Shopify-Storefront-Access-Token字段为空字符串，这是请求Shopify Storefront API的必要凭证。没有有效令牌，API会返回权限错误，导致response?.data?.data?.products?.edges为undefined，最终productsList被设为undefined，页面无法渲染内容。

解决：
在Shopify后台生成具有products.read权限的Storefront Access Token，替换空字符串。

2. 未替换占位店铺域名 #

baseURL中的<MyShopifyStore>是占位符，必须替换为你的实际店铺域名（例如your-store.myshopify.com）。域名错误会导致请求无法到达Shopify服务器，静默失败。

3. 无错误处理机制 #

fetchProducts函数没有try/catch包裹，请求失败（网络错误、API报错）时会静默终止，无法定位问题。例如：

• 网络超时
• API返回errors字段（如权限不足、查询语法错误）
• 店铺未启用Storefront API

解决：
添加错误处理并打印日志：

export const fetchProducts = async () => {
  const query = `{
    products(first: 10) {
      edges {
        node {
          id
          title
          descriptionHtml
          variants(first: 1) {
            edges {
              node {
                id
                price
                sku
                image {
                  originalSrc
                }
              }
            }
          }
        }
      }
    }
  }`;
  try {
    const response = await shopifyApi.post('', { query });
    console.log('API 返回数据:', response.data); // 查看是否有data或errors
    return response?.data?.data?.products?.edges || [];
  } catch (error) {
    console.error('获取产品失败:', error); // 打印错误详情
    return [];
  }
}

同时在组件中打印获取到的数据：

const getProducts = async () => {
  const data = await fetchProducts();
  console.log('组件接收数据:', data);
  setProductsList(data || []);
};

4. TypeScript类型缺失导致的推断错误 #

never[]是TypeScript无法推断返回值类型时的默认结果，解决方法是给fetchProducts添加明确的返回类型定义，同时避免后续渲染时的类型报错：

// 定义所需类型
interface ProductImage {
  originalSrc: string;
}

interface ProductVariant {
  id: string;
  price: string;
  sku: string;
  image?: ProductImage;
}

interface Product {
  id: string;
  title: string;
  descriptionHtml: string;
  variants: { edges: { node: ProductVariant }[] };
}

export const fetchProducts = async (): Promise<{ node: Product }[] | []> => {
  // 现有代码
}

5. GraphQL查询潜在问题 #

如果API返回了products但edges为空，可能是：

• 店铺中没有上架产品
• 查询参数first:10超出了店铺产品总数（但至少会返回现有产品）
• 变体或图片字段为null，但这只会导致渲染报错，不会让整个列表消失

排查步骤 #

1. 确认Storefront Access Token有效且权限正确
2. 替换baseURL中的占位店铺域名
3. 打开浏览器控制台，查看API 返回数据和组件接收数据日志，定位请求是否成功、返回数据结构是否符合预期
4. 检查Shopify后台是否有上架产品

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