綁定元素“posts”隱式具有“any”類型

Question

我有我正在編寫的涉及graphql、react 和typescript 的代碼。 在中途，我收到錯誤消息Binding element 'posts' 隱含地具有 'any' 類型。 我不知道這意味着什么，需要幫助。 以下是錯誤來自的代碼，謝謝

import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import {PostCard, Categories, PostWidget} from '../components'
import {getPosts} from '../services'

export default function Home({posts}) {
  return (
    <div className="container mx-auto px-10 mb-8">
      <Head>
        <title>FTS Blog</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
        <div  className='lg:col-span-8 col-span-1'>
          {posts.map((post) => <PostCard post={post} key={post.title}/>)}
        </div>
      
        <div className="lg:col-span-4 col-span-1">
          <div className="classname lg:sticky relative top-8">
            <PostWidget />
            <Categories />
          </div>
        </div>
      </div>

    </div>
  )
}

export async function getStaticProps() {
  const posts = (await getPosts()) || []

  return {
    props:{posts}
  }
}

Answer 1

這是來自 Typescript 的錯誤，讓您知道您的道具posts沒有定義類型，因此它被假定為類型any 。

您可以通過顯式為posts提供any的類型來消除錯誤，但posts顯然應該是基於您擁有的代碼上的這一行的數組： posts.map((post) => ...所以您可能想給posts提供any array的類型，如下所示：

export default function Home({posts}: {posts: any[]}) {

Nextjs 有一些關於如何將 getStaticProps 與 Typescript 一起使用的附加信息

Answer 2

我認為您可以簡單地使用打字稿中的界面

此語法將解決您的問題：

import type { NextPage } from 'next';

interface HomeProps{
    posts:any[]
}

const Home: NextPage<HomeProps> = ({ posts }) => (
<div className="container mx-auto px-10 mb-8">
    <Head>
        <title>FTS Blog</title>
        <link rel="icon" href="/favicon.ico" />
    </Head>

    <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
        <div  className='lg:col-span-8 col-span-1'>
            {posts.map((post) => <PostCard post={post} key={post.title}/>)}
        </div>

        <div className="lg:col-span-4 col-span-1">
            <div className="classname lg:sticky relative top-8">
                <PostWidget />
                <Categories />
            </div>
        </div>
    </div>

</div>
  );

export default Home;

綁定元素“posts”隱式具有“any”類型

問題描述

2 個解決方案

解決方案1
1 2022-05-27 19:56:16

解決方案2
1 已采納 2022-05-27 20:03:21

綁定元素“posts”隱式具有“any”類型

問題描述

2 個解決方案

解決方案1 1 2022-05-27 19:56:16

解決方案2 1 已采納 2022-05-27 20:03:21

解決方案1
1 2022-05-27 19:56:16

解決方案2
1 已采納 2022-05-27 20:03:21