Vue3+TS+TMDB项目中空流派名称过滤失效问题排查与解决

1. 原判断逻辑的错误点 #

• 未处理流派不存在的情况：当gid对应的流派在genres集合中找不到时，this.genres[gid]会返回undefined，直接访问.name会抛出Cannot read properties of undefined (reading 'name')错误，导致整个判断逻辑中断，根本无法执行到length检查步骤。
• Vue3组合式API误用this：如果你的MovieCard组件使用<script setup>组合式API，this是不存在的，直接用this.genres会导致变量未定义，判断逻辑直接失效。
• 未覆盖边界值：即使流派存在，若name为null，访问.length会报错；若name是空字符串或全空格字符串，原判断name.length可能误判（全空格字符串length不为0，但实际需要隐藏）。

2. 实现仅显示有效流派名称的可靠方式 #

方式一：使用计算属性预处理（推荐） #

通过计算属性提前过滤出符合要求的流派，兼顾可读性和性能：

选项式API版本

computed: {
  validGenres() {
    return this.genreIds.filter(gid => {
      const genre = this.genres[gid];
      // 依次校验：流派存在、名称是字符串、去除首尾空格后长度>0
      return genre && typeof genre.name === 'string' && genre.name.trim().length > 0;
    }).map(gid => this.genres[gid].name);
  }
}

模板中直接渲染过滤后的结果：

<template>
  <div class="genres-container" v-if="validGenres.length">
    <span v-for="genre in validGenres" :key="genre">{{ genre }}</span>
  </div>
</template>

组合式API（