Next.js导入data.json后渲染为空，控制台输出空数组求助

核心问题定位与修复 #

1. 组件循环未返回JSX元素 #

你的data.map回调使用大括号{}但未显式返回JSX，导致循环后没有渲染任何内容。两种修正方式：

• 在箭头函数内添加return语句
• 将大括号替换为小括号()，利用箭头函数自动返回特性

2. 数据匹配逻辑可能不匹配 #

getStaticProps中用ev.city === id过滤数据，但getStaticPaths是从events_categories的id生成路径参数cat。需确认：

• events_categories的id值是否与allEvents里的city值完全一致（包括大小写、字符串格式）
• 若events_categories的id是城市ID而非名称，需将过滤条件改为对应字段（如ev.cityId === id）

3. 导入路径正确性 #

Next.js未配置baseUrl时，建议使用相对路径导入文件。比如页面文件在pages/events/[cat].js、data.json在根目录data文件夹下，导入路径应为../data/data.json（根据实际文件层级调整），避免绝对路径导致文件找不到。

修正后的代码示例 #

import Image from 'next/image'

const EventPerCityPage = ({ data }) => {
  console.log("helloa" + data)
  return (
    <div>
      <h1> event in london</h1>
      <div>
        {/* 修复map返回问题：用小括号自动返回JSX */}
        {data.map((ev) => (
          <a key={ev.id} href={`/events/${ev.city}/${ev.id}`}>
            <Image width={300} height={300} alt={ev.title} src={ev.image} />
            <h2>{ev.title}</h2>
            <p>{ev.description}</p>
          </a>
        ))}
      </div>
      <p>hello</p>
    </div>
  )
}
export default EventPerCityPage;

export async function getStaticPaths() {
  // 使用相对路径导入数据文件
  const { events_categories } = await import('../data/data.json')
  console.log(events_categories + "this code")
  const allPaths = events_categories.map(ev => {
    return {
      params: {
        cat: ev.id.toString()
      }
    }
  })
  console.log(allPaths)
  return {
    paths: allPaths,
    fallback: false
  }
}

export async function getStaticProps(context) {
  const id = context?.params.cat
  console.log("all path aaaaaaaa" + id)
  // 使用相对路径导入数据文件
  const { allEvents } = await import('../data/data.json')
  console.log(allEvents + "rrrrrrtttttttt")
  // 确认id与city的匹配关系，此处假设events_categories的id为城市名称
  const data = allEvents.filter((ev) => ev.city === id)
  console.log(data + "eeeeeeeeeezzzzzzz")
  return {
    props: { data }
  }
}

额外检查项 #

• 打开data.json，确认events_categories和allEvents为数组类型，且内部对象的id、city、title等字段存在且格式正确
• 查看控制台网络请求，确认data.json是否被正确加载
• 若console.log(allEvents)输出[object Object]，说明数据加载成功，问题出在过滤逻辑或组件渲染；若输出为空，说明文件导入路径仍错误

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