如何在反应打字稿中使用类型将数据从父级传递给子级

Question

我在我的项目中使用 React 和 Typescript。

在我的 App.tsx 中

 const data = {
       navData: [
         {
          title: "A",
          id: 1
         },
         {
          title: "B",
          id: 2
         }
       ],
       otherData: [
         {
          title: "A",
          id: 1
         },
         {
          title: "B",
          id: 2
         }
       ]
    }

   <Navbar data={data} />

我的父组件中有一个数据，例如：

我的父组件导航栏组件：

  type dataItems = {
     navData?: [];
  };

  interface NavBarProps {
    data: dataItems;
  }


  const NavBar: FC<NavBarProps> = ({ data }) => { 
         return (
            <Nav items={data} />
         )
      }

在我的子组件中，我不想获取这些项目（项目是 data.navData）并使用地图返回它们，例如：

  const Nav: FC<NavProps> = ({}) => { 
         return (
            {items.map((item) => ( 
               <p>{item.title}</p>
            )}
      }

我不知道我在父组件中定义类型的方式是对的。 而且我不知道如何在子组件中定义这些类型以使用它们