Javascript Typescript错误：Type'；未定义'；不可分配给类型'；卡片样式[]

我正在将Typescript添加到我的React应用程序中，出现下一个错误：

类型脚本错误：

类型“CardsTypes[]|未定义”不能分配给类型“CardsTypes[]”。 类型“未定义”不可分配给类型“CardsTypes[]

这是我的

App.tsx

。我添加**是为了向您展示给我错误的地方

import { useState, useEffect } from 'react';
import './App.css';
import CardList from '../components/CardList';
import SearchBox from '../components/SearchBox';
import Scroll from '../components/Scroll';
import ErrorBoundry from '../components/ErrorBoundry';

export interface CardsTypes {
  name: string;
  id: number;
  email: string;
}

function App() {
  const [cards, setCards] = useState<Array<CardsTypes> | null>([]);
  const [searchField, setSearchField] = useState<string | null>('');

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((resp) => resp.json())
      .then((users) => setCards(users));
  }, []);

  const filteredCards = cards?.filter((card) => {
    return searchField
      ? card.name.toLowerCase().includes(searchField.toLowerCase())
      : '';
  });

  return cards && !cards.length ? (
    <h3>Loading...</h3>
  ) : (
    <div className='tc'>
      <h1 className='f1'>Search Cards</h1>
      <SearchBox onSearchChange={setSearchField} />
      <Scroll>
        <ErrorBoundry>
          **<CardList *cards*={filteredCards} />**
        </ErrorBoundry>
      </Scroll>
    </div>
  );
}

export default App;

从'react'导入{useState，useffect}；
导入“/App.css”；
从“../components/CardList”导入卡片列表；
从“../components/SearchBox”导入SearchBox；
从“../components/Scroll”导入滚动；
从“../components/ErrorBoundry”导入ErrorBoundry；
导出接口卡片样式表{
名称：字符串；
id：编号；
电子邮件：字符串；
}
函数App（）{
const[cards，setCards]=useState（[]）；
常量[searchField，setSearchField]=useState（“”）；
useffect（（）=>{
取（'https://jsonplaceholder.typicode.com/users')
.然后（（resp）=>resp.json（））
。然后（（用户）=>setCards（用户））；
}, []);
常量过滤器卡片=卡片？过滤器（（卡片）=>{
返回搜索字段
？card.name.toLowerCase（）包括（searchField.toLowerCase（））
: '';
});
返回卡片&&！卡片长度(
加载。。。
) : (
搜索卡
****
);
}
导出默认应用程序；

cards？.filter（…）

如果定义了

cards

，则返回一个数组，否则返回

未定义的数组<代码>卡片列表

显然需要一个数组。因此，您需要考虑如果

filteredCards

没有值会发生什么-是否应该呈现

CardList

？