如何在Next.js的[slug].js页面展示对应单条数据？

你的核心问题是没在[slug].js中获取当前页面的slug参数，也没有从Users数组里筛选出匹配的数据。下面给你两种可行的解决方案：

方法一：静态生成（推荐，适配你的静态测试数据） #

Next.js针对静态数据推荐用getStaticPaths和getStaticProps预生成页面，同时精准获取对应数据：

修改[slug].js代码如下：

import Users from '../../components/list'

const Details = ({ story }) => {
  if (!story) {
    return <div>该内容不存在</div>
  }
  
  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold">{story.title}</h1>
      <p className="mt-4 text-gray-700">{story.desc}</p>
      <div className="mt-6">
        <h3 className="text-xl font-semibold">正文内容</h3>
        <p className="mt-2">{story.body}</p>
      </div>
      <div className="mt-6">
        <h3 className="text-xl font-semibold">分类</h3>
        <ul>
          {story.cat.map((item, idx) => (
            <li key={idx}>{Object.values(item)[0]}</li>
          ))}
        </ul>
      </div>
    </div>
  )
}

// 预生成所有可能的详情页路由
export async function getStaticPaths() {
  const paths = Users.map(user => ({
    params: { slug: user.slug }
  }))

  return { paths, fallback: false }
}

// 根据当前slug获取对应的数据
export async function getStaticProps({ params }) {
  const story = Users.find(user => user.slug === params.slug)
  return { props: { story } }
}

export default Details

方法二：客户端路由获取（适合动态更新的数据） #

如果后续数据需要动态加载，可以用Next.js的useRouter钩子在客户端获取slug并筛选数据：

import { useRouter } from 'next/router'
import Users from '../../components/list'
import { useEffect, useState } from 'react'

const Details = () => {
  const router = useRouter()
  const [story, setStory] = useState(null)

  useEffect(() => {
    // 等待路由参数加载完成后再匹配数据
    if (router.isReady) {
      const matchedStory = Users.find(user => user.slug === router.query.slug)
      setStory(matchedStory)
    }
  }, [router.isReady])

  if (!story) {
    return <div>加载中...</div>
  }

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold">{story.title}</h1>
      <p className="mt-4 text-gray-700">{story.desc}</p>
      <div className="mt-6">
        <h3 className="text-xl font-semibold">正文内容</h3>
        <p className="mt-2">{story.body}</p>
      </div>
      <div className="mt-6">
        <h3 className="text-xl font-semibold">分类</h3>
        <ul>
          {story.cat.map((item, idx) => (
            <li key={idx}>{Object.values(item)[0]}</li>
          ))}
        </ul>
      </div>
    </div>
  )
}

export default Details

核心逻辑说明 #

两种方案的核心都是通过当前页面的slug参数，在Users数组中找到匹配的对象，之前的代码缺少这一步，所以无法展示对应内容。静态生成方式在构建时就生成所有详情页，性能更优，更适合你当前的静态测试数据。

内容的提问来源于stack exchange，提问作者Remo Furrer