Vue Storefront集成Shopify后产品/分类页报错求助

全新安装集成Shopify的Vue Storefront后，点击产品或分类页时出现以下问题：

浏览器报错提示 #

**An error occured -Please go back or try again**

命令行错误日志 #

[VSF][error]: useFacet/useFacet/search Cannot read properties of undefined (reading 'products')

at search (server.js:26226:56)
  at runMicrotasks (<anonymous>)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)

Vue渲染警告 #

[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'toString')

错误来源：

<Pages/Category.vue> at pages/Category.vue
   <Nuxt>
    <DefaultLayout> at layouts/default.vue
       <Root>

核心原因 #

全新安装出现该问题，通常是Shopify API配置错误/权限不足、Shopify店铺无产品/分类数据，或模板未处理空数据场景导致。

具体解决步骤 #

• 检查Shopify API配置
  打开项目根目录的middleware.config.js，确认Shopify配置项：

  module.exports = {
    integrations: {
      shopify: {
        location: '@vue-storefront/shopify-api/server',
        configuration: {
          domain: 'your-shop-name.myshopify.com', // 确认域名正确
          storefrontAccessToken: 'your-storefront-token' // 确认token有效且权限足够
        }
      }
    }
  };
  

  确保storefrontAccessToken拥有Products、Collections的读权限，可在Shopify后台的「应用和销售渠道」→「开发应用」→「权限」中检查。

• 验证Shopify API返回结构
  手动调用Shopify Storefront API，确认返回数据是否包含products字段：

  1. 使用curl发送请求：

     curl -X POST https://your-shop-name.myshopify.com/api/2024-07/graphql.json \
       -H "X-Shopify-Storefront-Access-Token: your-storefront-token" \
       -H "Content-Type: application/json" \
       -d '{"query":"query { products(first: 10) { edges { node { id title } } } }"}'
     

  2. 如果返回无products或数据为空，说明店铺无产品数据，需先在Shopify后台创建产品和分类。

• 修复Category.vue的空值判断
  打开pages/Category.vue，找到调用toString()的代码位置，添加空值保护：

  • 原代码示例：{{ someValue.toString() }}
  • 修改为：{{ someValue?.toString() || '' }} 或 {{ someValue ? someValue.toString() : '' }}

• 初始化Shopify店铺数据
  若为全新Shopify店铺，需至少创建1个分类和1个产品，VSF默认模板未处理空数据场景，无数据会导致读取undefined属性报错。

• 清除缓存重启服务
  执行以下命令清除缓存并重启项目：

  rm -rf .nuxt node_modules/.cache
  npm install
  npm run dev
  

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