未处理运行时TypeError：无法读取undefined的contains属性排查

API 探路者

2026-9-1

购物车显隐切换报错排查方案

错误根因

报错Cannot read properties of undefined (reading 'contains')的直接诱因是API拼写错误：你代码中写的clasList为错误拼写，DOM元素用于操作类名的原生属性是classList，漏写了第二个s，导致ref.current.clasList值为undefined，调用其上的contains方法时直接触发类型错误。

修复步骤

修正基础拼写错误
将代码中所有clasList替换为正确的classList，同时补全反向切换逻辑（原代码仅处理了从隐藏到显示的分支，未编写显示切回隐藏的逻辑，会导致点击一次后购物车无法收回），基础修复版代码如下：

const toggleCart = () => {
  if (ref.current.classList.contains('translate-x-full')){
    ref.current.classList.remove('translate-x-full')
    ref.current.classList.add('translate-x-0')
  } else {
    ref.current.classList.remove('translate-x-0')
    ref.current.classList.add('translate-x-full')
  }
}

增加挂载兜底判断
即使确认ref已正确绑定，也要补充非空校验，规避组件首次渲染时ref还未完成DOM挂载的时序问题，同时可以用classList.replace简化类名切换逻辑，优化后代码：

const toggleCart = () => {
  // ref未挂载时直接终止逻辑，避免抛错
  if (!ref.current) return
  const cartDom = ref.current
  if (cartDom.classList.contains('translate-x-full')) {
    cartDom.classList.replace('translate-x-full', 'translate-x-0')
  } else {
    cartDom.classList.replace('translate-x-0', 'translate-x-full')
  }
}