使用函数赋值变量触发TypeScript错误2454：变量未赋值即使用

我在用NextJS搭建商城项目时，定义了size和ribbonTable两个变量，通过异步函数findSizeCategory从数据库查询为其赋值，代码如下：

let size: Size

let ribbonTable: Ribbon

async function findSizeCategory(): Promise<void> {
  const category = product?.category ;
  switch(category) {
    case "mens":
      size = await db.select().from(mens_size);
      break;
    case "womans":
      size = await db.select().from(womans_size);
      ribbonTable = await db.select().from(ribbon)
      break;
    case "kids":
      size = await db.select().from(kids_size);
      ribbonTable = await db.select().from(ribbon)
      break;
  }
}
await findSizeCategory()

但后续使用size遍历、判断ribbonTable长度并遍历时，触发了TypeScript错误TS2454（变量未赋值即使用），相关代码：

<label className="block">
  what size are you?
  <select>
    {size.map(s =>
      <option key={s.size_id} value={`${s.size_id}`}>{s.size}</option>
    )}
  </select>
</label>

{ribbonTable && ribbonTable.length > 0 && (
  <label className="block ">
    Select a ribbon:
    <select>
      {ribbonTable.map(r =>
        <option key={r.ribbon_id} value={r.ribbon_id}>{r.ribbon}</option>
      )}
    </select>
  </label>
)}

问题原因 #

1. 变量未初始化：TypeScript严格模式下，let声明的变量若未明确初始化，且无法确保所有代码分支都为其赋值时，会触发该错误。比如product?.category可能为undefined，此时switch的所有case都不匹配，size和ribbonTable会保持未赋值状态；即使进入mens分支，ribbonTable也未被赋值。
2. 类型定义可能有误：db.select()返回的是数组，但变量类型声明为Size和Ribbon（单个对象类型），实际应为Size[]和Ribbon[]（数组类型），这也会加剧TS的类型检查错误。

解决方案 #

1. 修正类型定义并初始化变量

给变量指定正确的数组类型，并初始化为空数组，确保变量始终有值：

// 假设Size是单个尺寸的类型，Size[]是尺寸数组类型
let size: Size[] = [];
let ribbonTable: Ribbon[] = [];

2. 完善switch分支，覆盖所有情况

添加default分支处理category为undefined或其他值的情况，同时确保每个分支都给所有变量赋值：

async function findSizeCategory(): Promise<void> {
  const category = product?.category;
  switch(category) {
    case "mens":
      size = await db.select().from(mens_size);
      ribbonTable = []; // 明确赋值空数组
      break;
    case "womans":
      size = await db.select().from(womans_size);
      ribbonTable = await db.select().from(ribbon);
      break;
    case "kids":
      size = await db.select().from(kids_size);
      ribbonTable = await db.select().from(ribbon);
      break;
    default:
      // 处理未知分类的情况
      size = [];
      ribbonTable = [];
      break;
  }
}

3. 使用时添加兜底判断（可选）

在JSX中使用变量时，通过可选链或空值合并进一步兜底，避免运行时错误：

<label className="block">
  what size are you?
  <select>
    {(size || []).map(s =>
      <option key={s.size_id} value={`${s.size_id}`}>{s.size}</option>
    )}
  </select>
</label>

{(ribbonTable || []).length > 0 && (
  <label className="block ">
    Select a ribbon:
    <select>
      {(ribbonTable || []).map(r =>
        <option key={r.ribbon_id} value={r.ribbon_id}>{r.ribbon}</option>
      )}
    </select>
  </label>
)}

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