将道具传递给 children 时出现 NextJS 类型错误

Question

我有一个包含这些类型的类型文件：

type IServiceItems = {
  fields: {
    name: string;
    description: string;
    logo: {
      fields: {
        file: {
          url: string;
        };
      };
    };
  };
};

type ITechItems = {
  fields: {
    name: string;
    logo: {
      fields: {
        file: {
          url: string;
        };
      };
    };
  };
};

我有一个页面，我在其中使用 SSR 道具获取数据。我正在尝试将这些道具传递给 children。但是我收到类型错误。

页面tsx文件：

interface Props {
  services: IServiceItems[];
  technologies: ITechItems[];
}

const Index = ({ services, technologies }: Props) => {
  return (
    <div>
      <ServicesBlock services={...services} />
      <TechnologiesBlock technologies={...technologies} />
    </div>
  );
};

服务和技术属性错误：

(property) services: IServiceItems[]
Type '{ services: IServiceItems[]; }' is not assignable to type 'IntrinsicAttributes & IServiceItems[]'.
  Property 'services' does not exist on type 'IntrinsicAttributes & IServiceItems[]'.

最后是组件：

const ServicesBlock = (services: IServiceItems[]) => {}

我在传递参数时尝试使用 ... 但没有帮助。

数据获取：

export const getServerSideProps = async () => {
  const services = await contentful.getEntries({ content_type: 'service' });
  const technologies = await contentful.getEntries({ content_type: 'technology' });

  return {
    props: {
      services: services.items,
      technologies: technologies.items,
    },
  };
};

Answer 1

如果您需要一个数组（删除 ...），则在将其作为道具传递时不应展开您的 services 数组：

const Index = ({ services, technologies }: Props) => {
  return (
    <div>
      <ServicesBlock services={services} />
      <TechnologiesBlock technologies={technologies} />
    </div>
  );
};

此外，将您的 ServicesBlock 声明更改为：

interface Props {
    services: IServiceItems[];
}

const ServicesBlock = ({ services }: Props) => {}

将道具传递给 children 时出现 NextJS 类型错误

NextJS type error while passing props to children

reactjs

next.js