NextJS：Props对象未定义

Question

目标：映射存储在本地JSON文件中的“投资组合”项目，然后将每个对象传递给我创建的卡组件。

投资组合组件位于页面文件夹中，console.log（行：15-正确显示JSON对象的数组// [{}，{}，{}] ...

import React from "react"
import Card from "../components/Card"
    
export async function getStaticProps() {
    const res = await import("./db.json")
    return {
        props: {
            projects: res.projects,
        },
    }
}

const portfolio = ({ projects }) => {
    //this console.log works as expected
    console.log(projects)
    return (
        <div className='portfolio'>
            {projects.map((project, id) => (
                <Card key={id} props={project} /> 
            ))}
        </div>
    )
}
    
export default portfolio

试图破坏Props对象时，问题开始 。

import React, { useState } from "react"
import Image from "next/image"
    
const Card = ({ image, title, github, demo }) => {
    console.log(title)
    const [hovered, setHover] = useState(false)
    return (
        <div
            className='portfolio-card'
            onMouseEnter={() => setHover(!hovered)}
            onMouseLeave={() => setHover(!hovered)}
        >
            <div className='portfolio-card-info'>
                <h3 className='portfolio-card-title'>{title}</h3>
                {hovered && <p>ReactJs</p>}
                {hovered && <p>Recoil</p>}
                <ul className='portfolio-links'>
                    <li>
                        <a href={github}>Source</a>
                    </li>
                    <li>
                        <a href={demo}>Demo</a>
                    </li>
                </ul>
            </div>
            <Image className='portfolio-image' src={image} alt='portfolio-image' />
        </div>
    )
}
    
export default Card

传递给卡片组件 15：10如预期的那样

。

： > array（3）[{…}，{…}，{…}] portfolio：15：10
未定义的卡。JS：5：10

我检查了React Dev工具，例如，如果我选择了第一张卡，我可以看到道具。有人可以告诉我我在这里缺少什么现在这一天半了。