TypeScript筛选数组对象属性并推入新数组报错：Cannot read properties of undefined

你遇到的错误核心是**readArray变量只做了类型声明，但没有初始化**。let readArray: DocType[];这行代码仅告知TS该变量的类型为DocType[]，但实际它的初始值是undefined，调用undefined.push()必然会抛出类型错误。

修复方案1：初始化空数组后使用原有逻辑 #

将readArray声明改为初始化空数组，之后你的forEach或for循环逻辑就能正常运行：

let readArray: DocType[] = []; // 关键：初始化空数组

docList.forEach(i => {
    if (i.read === true) {
        readArray.push(i)
    };
});

修复方案2：用Array.filter简化逻辑 #

在React/TS场景下，处理数组筛选用filter方法更简洁，无需手动维护数组push操作：

const readArray = docList.filter(doc => doc.read === true);
// 或更简洁写法：const readArray = docList.filter(doc => doc.read);

完整修复后的组件代码 #

import './Main.css';
import { useState } from 'react';

type DocType = {
    id: number;
    title: string;
    read: boolean;
};

export default function Main() {
    const [docList, setDocList] = useState<DocType[]>([
        { title: 'doc 1', id: 1, read: true },
        { title: 'doc 2', id: 2, read: false },
        { title: 'doc 3', id: 3, read: true },
        { title: 'doc 4', id: 4, read: false },
        { title: 'doc 5', id: 5, read: false }
    ]);
    // 用filter直接生成目标数组
    const readArray = docList.filter(doc => doc.read);

    return (
        <div>
            main
        </div>
    );
};

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