打字稿错误：类型“未定义”不可分配给类型“CardsTypes[]”

Question

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

打字稿错误：

输入'CardsTypes[] | undefined' 不能分配给类型 'CardsTypes[]'。 类型 'undefined' 不能分配给类型 '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;