Javascript 如何为我的astro页面中的相同组件自动创建不同的内容

当我在名为post1和post2的不同md文件中提供内容时，我希望将每个内容添加到名为Service的组件中.当我像下面描述的那样做时，我的组件页面上出现了一个错误，说标题未定义.如何自动添加这些内容？

我的页面文件:

---
import Layout from '../layouts/Layout.astro';
import { getCollection } from "astro:content";
const allPosts = await getCollection("posts");
import Service from "../components/Service.astro";
---

<Layout title="Serwis">
    <ul>
        {
             allPosts.map((post, index) => (
                <Service key={index} title={post.title} price={post.price} description={post.description}/>
            ))
          }
    </ul>
</Layout>

post1 md文件:

---
title: Konserwacja Klimatyzatora    
description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt, lacus sit amet ullamcorper feugiat, neque augue vulputate dui, vel condimentum justo nunc a ipsum.
price: Już od ...PLN
---

我的组成部分:

---
import Layout from '../layouts/Layout.astro';
---

<Layout title="Service">
    <div>
        <h2>{title}</h2>
        <p>{price}</p>
    </div>
    <p>{description}</p>
</Layout>