Next.js+TypeScript项目报错：Property 'filter' does not exist on type 'ContextProps' 求助

嘿，兄弟，我看了你的代码，一下子就发现问题啦！你在EntryList.tsx里犯了个新手常踩的小坑——对对象调用了数组的filter方法，TypeScript当然会果断拦着你啦😉

问题根源 #

先回头看你在EntryContext.tsx里定义的ContextProps类型：

export type ContextProps = {
  entries: Entry[]
}

它是一个包含entries数组的对象，而不是直接的数组。当你用useEntries()获取上下文时，拿到的是这个完整的对象，不是里面的数组。你之前写的const entries = useEntries()，这里的entries其实是整个ContextProps对象，而不是数组，对象本身没有filter方法，TypeScript自然就报错了。

解决方案 #

超简单，把对象里的数组解构出来就行！修改EntryList.tsx里的代码：

export const EntryList = ({ status }: Props): JSX.Element => {
  // 解构出真正的entries数组
  const { entries } = useEntries()

  const renderEntries = entries
    .filter((entry: Entry) => entry.status === status)
    .map((entry: Entry) => (
      <EntryCard
        key={entry._id}
        entry={entry}
      />
    ))

  // ... 后面的return代码保持不变
}

这样entries就变成了Entry[]类型的数组，自然就能调用filter和map方法啦。

如果你暂时不习惯解构，也可以写成useEntries().entries.filter(...)，不过解构的写法更清晰易懂，尤其你还在学TypeScript，推荐优先用解构~

给TypeScript新手的小提示 #

TypeScript在这里报错其实是在帮你提前避坑——如果没有类型检查，你直接对对象调用filter，到运行时才会崩掉，现在编译阶段就告诉你问题，这就是TypeScript的实用之处呀！以后遇到类似“某个方法不存在于某个类型”的错误，先确认下你操作的值是不是你以为的类型~

备注：内容来源于stack exchange，提问作者juan99