Javascript 从数组中提取数据并在nextjs中动态显示路由

我正在学习Nextjs框架，在动态路由和如何从数组中获取数据方面遇到了困难。我学习了Nextjs的基本知识，但这让我陷入了困境

我想要什么

获取存储为items.tsx文件的此数组的信息：

export const projects = [
  {
    id: '2',
    title: 'Italian recipes book',
    description: `This a web design and soon-to-be a fully functional and responsive React application` 
 },
  {
    id: '1',
    title: 'Chat App website',
    description: `This is a homepage design and build for a concept project – a chat application. I designed the page
    first then built a responsive web page using Webflow.`
  },
] 

export async function getStaticPaths() {
  const paths = getAllItemsIds()
  return {
    paths,
    fallback: false
  }
}

export async function getStaticProps({ params }) {
  const projectData = getProjectData(params.id)
  return {
    props: {
      projectData
    }
  }
}



const Project = ({ projectData }) => {
  return (
    <>
      <div>
       {projectData.id}
       {projectData.title}
       {projectData.description}  
      </div>
      
      </>
  )
}

export default Project;

根据nextjs网站，我能够获取id，并创建了一个函数来获取项目数据

import { projects } from "../models/projects";

export function getAllItemsIds() {
  return projects.map(project => {
    return {
      params: {
        id: project.id,
      }
    }
  })
}

export function getProjectData(id) {
  return {
    id,
  }
}

我相信函数getProjectData（id）缺少其余的数据，我在如何获取它方面遇到了问题。我想根据参数（在本例中为id 1或2）在[id].tsx文件中显示数组的信息。 这是我的[id]。tsx文件：

export const projects = [
  {
    id: '2',
    title: 'Italian recipes book',
    description: `This a web design and soon-to-be a fully functional and responsive React application` 
 },
  {
    id: '1',
    title: 'Chat App website',
    description: `This is a homepage design and build for a concept project – a chat application. I designed the page
    first then built a responsive web page using Webflow.`
  },
] 

export async function getStaticPaths() {
  const paths = getAllItemsIds()
  return {
    paths,
    fallback: false
  }
}

export async function getStaticProps({ params }) {
  const projectData = getProjectData(params.id)
  return {
    props: {
      projectData
    }
  }
}



const Project = ({ projectData }) => {
  return (
    <>
      <div>
       {projectData.id}
       {projectData.title}
       {projectData.description}  
      </div>
      
      </>
  )
}

export default Project;

导出异步函数getStaticPaths（）{
常量路径=getAllItemsIds（）
返回{
路径，
后退：错误
}
}
导出异步函数getStaticProps（{params}）{
const projectData=getProjectData（params.id）
返回{
道具：{
项目数据
}
}
}
const Project=（{projectData}）=>{
返回(
{projectData.id}
{projectData.title}
{projectData.description}
)
}
导出默认项目；

---

到目前为止，我只能显示我的projectData.id，我对所有getstaticpath（）和getStaticProps（）的内容都有点困惑。我真的很感谢您的帮助。

我不知道这样做是否正确，但我还是做到了我想做的事情：

添加了其他参数并将数组映射到getProjectData中

export function getProjectData(id, title, description ) {
  projects.map(data => {
    if (data.id === id) {
      title = data.title;
      description = data.description;
    }
  });
  return {
    id,
    title,
    description
  }
}

在[id].tsx中，我更新了getStaticProps，如下所示

export async function getStaticProps({ params, title, description }) {
  const projectData = getProjectData(params.id, title, description)
  return {
    props: {
      projectData
    }
  }
}

它确实根据id参数获取了数据