WooCommerce添加按产品属性筛选小部件后失效报错如何解决？

问题说明 #

• 运行环境：WooCommerce 5.5.2、WordPress 5.8
• 异常触发场景：删除单个商品并新增若干属性后，按产品属性筛选小部件功能失效，多次重置、重装本地开发环境均无法修复
• 控制台报错信息：

react-dom.min.js?ver=16.13.1:125 TypeError: Cannot read property 'id' of undefined
at Se (attribute-filter-frontend.js?ver=0d16e9e72c6ee9733f7cfce0ac033dac:14)
at we (react-dom.min.js?ver=16.13.1:84)
at zj (react-dom.min.js?ver=16.13.1:226)
at Th (react-dom.min.js?ver=16.13.1:152)
at tj (react-dom.min.js?ver=16.13.1:152)
at Te (react-dom.min.js?ver=16.13.1:146)
at Ja (react-dom.min.js?ver=16.13.1:224)
at md (react-dom.min.js?ver=16.13.1:173)
at react-dom.min.js?ver=16.13.1:175
at Rh (react-dom.min.js?ver=16.13.1:147)

报错截图：

问题复现步骤 #

• 添加若干商品分类
• 新建一个商品属性
• 为商品添加对应属性
• 在任意页面添加WooCommerce小部件「filter by product attribute（按产品属性筛选）」
• 小部件直接失效

修复方案 #

1. 缓存重建
   进入WordPress后台，依次打开「WooCommerce」→「状态」→「工具」页面，依次执行以下两个操作：

• 清理产品属性查询缓存
• 重建产品属性查找表
  操作完成后清空站点所有缓存，刷新页面试效即可，绝大多数同类场景可通过该方法修复。

2. 脏数据清理
   如果缓存重建后问题仍存在，是删除商品时残留的属性关联脏数据导致：
   进入「产品」→「属性」页面，删除异常出现前新增的所有属性，重新逐个创建属性后，给对应商品重新绑定属性即可。
3. 临时兼容方案
   如果需要快速恢复功能，安装「Classic Widgets」插件切换回WordPress旧版小部件系统即可，旧版小部件未使用React框架开发，不会触发该报错。

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