Firebase Firestore按类别过滤条目时遇TypeError错误的解决方法

咱们先拆解下这个错误：TypeError: Cannot read property 'filter' of null 本质是你调用filter()的对象是null——也就是this.products在某些时刻是空值，大概率是Firestore的异步数据还没加载完成，Vuex里的products状态还没被初始化。

下面是具体的修复方案，分步骤来：

1. 给Vuex的products状态设置默认空数组 #

先去你的Vuex products模块里，把state的初始值改成空数组，替代默认的null：

// Vuex products模块的state部分
const state = {
  products: [] // 设为空数组，确保一开始就有可调用filter的对象
}

这一步能从根源上避免数据加载前this.products为null的情况。

2. 在计算属性里增加防御性检查 #

就算Vuex的初始值设好了，咱们也可以在计算属性里加一层保险，同时防范某些文档可能缺少name或category字段的情况：

filteredItems() {
  // 先判断products是否存在，不存在直接返回空数组
  if (!this.products) return []
  
  let filtered = [...this.products] // 复制原数组，避免直接修改Vuex state
  
  if (this.search) {
    filtered = filtered.filter(item => {
      // 用可选链确保item.name和category存在，避免新的报错
      if (!item.name?.category) return false
      // 改用includes更直观，效果和indexOf>-1一致
      return item.name.category.toLowerCase().includes(this.search.toLowerCase())
    })
  }
  
  return filtered
}

如果你的项目环境不支持可选链?.，可以换成短路判断：item.name && item.name.category

3. 结合props的filterCategory（你代码里定义了但未使用） #

如果你还要根据父组件传入的filterCategory做过滤，可以把这个逻辑也加入：

filteredItems() {
  if (!this.products) return []
  
  let filtered = [...this.products]
  
  // 先处理分类过滤
  if (this.filterCategory) {
    filtered = filtered.filter(item => {
      return item.name?.category?.toLowerCase() === this.filterCategory.toLowerCase()
    })
  }
  
  // 再处理搜索关键词过滤
  if (this.search) {
    filtered = filtered.filter(item => {
      return item.name?.category?.toLowerCase().includes(this.search.toLowerCase())
    })
  }
  
  return filtered
}

这样调整后，不仅能解决当前的filter报错，还能避免后续可能出现的其他类型错误，同时也能正常实现基于类别和搜索词的过滤功能。

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