React+TypeScript传递初始空状态数组时出现null类型兼容错误

问题背景 #

在React+TypeScript项目中，将初始为空的状态对象数组传递给表格组件ExpenseList时触发类型错误，错误信息如下：

Type 'Expense[] | null | undefined' is not assignable to type 'Expense[] | undefined'.
Type 'null' is not assignable to type 'Expense[] | undefined'.ts(2322)

错误发生在App.tsx中向ExpenseList传递visibleExpenses的代码行（标注为THE PROBLEM LINE），核心矛盾是visibleExpenses可能为null，但ExpenseList的expenses属性仅接受Expense[]或undefined。

解决方案 #

方案一：将状态初始值改为空数组（推荐） #

直接消除null类型的存在，把expenses的初始状态从null改为空数组[]，这样整个状态的类型就固定为Expense[]，彻底避免null带来的类型不匹配。

修改App.tsx中的状态定义：

// 原代码
// const [expenses, setExpanses] = useState<Expense[] | null>(null);

// 修改后
const [expenses, setExpanses] = useState<Expense[]>([]);

同时调整空状态判断逻辑（原判断expenses === null不再需要）：

// 原代码
// if (expenses === null) {
//   return <div>The table is empty</div>;
// } else { ... }

// 修改后，判断数组长度是否为0
if (expenses.length === 0) {
  return <div>The table is empty</div>;
} else {
  // 原有渲染逻辑不变
}

方案二：传递时将null转换为合法类型 #

如果不想修改初始状态，可以在传递visibleExpenses时，用**空值合并运算符（??）**把null转为空数组或undefined，匹配ExpenseList的属性要求。

修改传递代码：

<ExpenseList
  expenses={visibleExpenses ?? []} // 将null转为空数组
  onDelete={(id) => setExpanses(expenses.filter((e) => e.id != id))}
/>

或者直接在visibleExpenses的定义中处理null：

const visibleExpenses = selectedCategory
  ? expenses?.filter((e: Expense) => e.category === selectedCategory) ?? []
  : expenses ?? [];

方案三：允许ExpenseList接收null类型 #

调整ExpenseList的Props类型，让expenses支持null，这样传递null就不会触发类型错误。

修改ExpenseList.tsx中的Props定义：

// 原代码
// interface Props {
//   expenses?: Expense[];
//   onDelete: (id: number) => void;
// }

// 修改后
interface Props {
  expenses?: Expense[] | null;
  onDelete: (id: number) => void;
}

由于组件内部已经用了可选链（expenses?.map、expenses?.reduce），无需修改其他渲染逻辑，可选链会自动处理null和undefined的情况。

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