NextJS动态传递Props出现undefined及标题子元素警告问题求助

核心问题1：photoConst和photoSrc传递后为undefined #

这两个Prop为undefined的本质原因是Markdown文件的frontmatter字段未被正确解析到post对象中。

NextJS解析Markdown/MDX的frontmatter时（比如用gray-matter或@next/mdx），需要确保你提取了所有需要的字段。检查你的解析逻辑，确认photoSrc和photoConst被包含在最终返回的post对象里，而不是只提取title、date等默认字段。

示例解析逻辑（以gray-matter为例）：

import matter from 'gray-matter'
import fs from 'fs'

const postPath = 'path/to/your/markdown/file.md'
const fileContent = fs.readFileSync(postPath, 'utf8')
const { data, content } = matter(fileContent)
// 确保data包含photoSrc、photoConst，再赋值给post对象
const post = { ...data, content, slug: 'your-slug' } as PostType

核心问题2：动态获取照片数量的写法错误 #

当前[...Array({${photoConst}_PHOTOS} - 1)]的写法完全错误：

• {${photoConst}_PHOTOS}会创建一个键为字符串的对象，无法访问你定义的COSTA_RICA_PHOTOS这类常量
• 就算photoConst有值，这种写法也无法关联到对应常量

正确做法是创建映射对象，将photoConst与对应数量常量关联：

import {FRANCE_PHOTOS, COSTA_RICA_PHOTOS, SWITZERLAND_PHOTOS} from '../lib/constants'

// 建立常量映射关系
const photoCountMap = {
  FRANCE: FRANCE_PHOTOS,
  COSTA_RICA: COSTA_RICA_PHOTOS,
  SWITZERLAND: SWITZERLAND_PHOTOS
}

type Props = {
    title: string // 既然要用到，建议设为必填
    photoSrc: string // 必填
    photoConst: keyof typeof photoCountMap // 限定类型，增强安全性
}

const PlockGrid = ({title, photoSrc, photoConst} : Props) => {
    // 获取对应照片数量，加默认值防止异常
    const photoCount = photoCountMap[photoConst] || 0
    return (
        <Plock gap="2rem">
            {
                [...Array(photoCount)].map((e, i) => { // 无需减1，Array(n)直接生成n个元素
                    return <img
                        key={i + 1}
                        src={`${photoSrc}${i + 1}.jpg`}
                        alt={`${title} detail`}
                        className="w-full"
                    />
                })
            }
        </Plock>
    )
}

核心问题3：图片路径重复拼接错误 #

你的Markdown中photoSrc已经是/assets/work/costa-rica/grid/，但代码里写了/assets/work/${photoSrc}/grid/${i + 1}.jpg，最终路径会变成/assets/work//assets/work/costa-rica/grid//grid/1.jpg，完全无效。直接使用${photoSrc}${i + 1}.jpg即可。

标题元素多子元素警告的解决 #

这个警告是因为PostHeader组件渲染title时，返回了多个同级DOM元素（未用单个容器或Fragment包裹）。检查PostHeader代码，确保title对应的元素只有一个子节点，示例：

// 错误示例：返回多个未包裹的元素
const PostHeader = ({title}) => (
  <>
    <h1>{title}</h1>
    <span>额外文本</span>
  </>
)

// 正确示例：用容器包裹，确保h1仅包含文本节点
const PostHeader = ({title}) => (
  <header className="post-header">
    <h1>{title}</h1>
    <p>发布日期...</p>
  </header>
)

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