小编ran*_*ote的帖子

我在我的小学习 NextJS 和 TypeScript 项目的界面上遇到了困难。我以为我已经解决了这个问题，但是当涉及到我的组件src上的 prop时，我正在处理 Header.tsx 上的问题Header。我不断收到以下错误消息

类型“StaticImageData”不可分配给类型“string”。预期的类型来自属性“src”，该属性在类型“IntrinsicAttributes & ILogo & {children?: ReactNode;”上声明。}'

我仍然对理解儿童道具以及如何使它们从父母流向孩子充满信心，这使得这样的错误有点令人沮丧。

我已经在下面发布了脚趾代码，并欢迎提出建议，以解决眼前的问题，以及将来缓解此问题的方法。

标头.tsx

import React from "react";
import Navbar from "./Navbar/Navbar";
import Logo from "../Logo";
import companyLogo from "../../../public/assets/images/logo.png";
import { ILogo } from "../../types/headerType";

const Header = () => {
  return (
    <div className="container flex justify-between h-16 max-w-full bg-pink-400 h-100px">
      <Logo className="object-cover" src={companyLogo} />
      <Navbar />
    </div>
  );
};

export default Header;

标志.tsx

import Image from "next/image";
import Link from "next/link"; …

我一直致力于通过使用教程文章（ https://www.mikealche.com/software-development/learn-react-animations-by-creating-）构建导航栏来尝试学习和理解 Nextjs 和 TypeScript条纹菜单）。

尽管事实上菜单项似乎在本地工作并且下划线动画出现并跟随鼠标悬停（这是我在文章中了解到的），但我仍然遇到以下问题：

1. 菜单项.tsx
   • 绑定元素“text”隐式具有“any”类型。ts(7031) [6,21]
   • 绑定元素“children”隐式具有“any”类型。ts(7031) [6,27]
2. 子项.tsx
   • 参数“title”隐式具有“any”类型。ts(7006) [4,18]
   • 参数“text”隐式具有“any”类型。ts(7006) [4, 25]
3. 子项容器.tsx
   • 绑定元素“children”隐式具有“any”类型。ts(7031) [3,29]

我对 React、NextJs 和 TypeScript 还很陌生，但我一直在慢慢浏览文档、视频，并耐心学习。然而，我不太确定如何解决这个问题，或者找到一种方法来更好地减轻这种情况在未来发生。

我已经发布了下面的文件。

感谢您对此的任何帮助或建议。

导航栏.tsx

import React from "react";
import MenuItem from "./MenuItem";
import SubItem from "./SubItem";
import { motion } from "framer-motion";

const Navbar = () => {
  return (
    <div className="w-screen p-20">
      <motion.div className="flex justify-center p-10 border">
        <MenuItem text={"Home"}>
          <SubItem title="Product" text="A SaaS for e-commerce" />
          <SubItem title="Blog" text="Latest posts" />
          <SubItem …