无法获取frontMatter中嵌套对象的值，求解决方法

问题分析 #

你的代码报错源于两个核心问题：

1. 错误通过frontMatter.details.signs直接访问嵌套数据，但details是数组，signs是数组中某一项对象的属性，并非details的直接属性。
2. signs本身是数组结构（每个元素是单个键值对的对象），硬编码访问sun/rising/moon既不符合数据结构，也会因访问不存在的属性抛出undefined错误。

修改后的Details组件代码 #

function Details() {
  return (
    <div>
      {details.map((item, index) => {
        const key = Object.keys(item)[0];
        const value = item[key];

        return (
          <div key={index}>
            <h1>{CamelCaseToSentence(key)}</h1>
            {Array.isArray(value) ? (
              <ul>
                {value.map((sign, signIndex) => {
                  const signKey = Object.keys(sign)[0];
                  const signValue = sign[signKey];
                  const symbol = {
                    sun: '☉',
                    rising: '↑',
                    moon: '☽'
                  }[signKey] || '';
                  
                  return (
                    <li key={signIndex}>
                      {symbol} {signValue}
                    </li>
                  );
                })}
              </ul>
            ) : (
              <p>{value}</p>
            )}
          </div>
        );
      })}
    </div>
  );
}

关键修改点 #

• 从当前遍历的item中获取对应值，而非直接引用frontMatter.details.signs，适配数组结构。
• 用Array.isArray(value)动态判断嵌套数组，替代硬编码的'signs'字符串判断，提升组件通用性。
• 遍历signs数组中的每个对象，动态提取键名和值，同时匹配对应符号，避免硬编码带来的维护问题。
• 添加React列表渲染要求的key属性，避免控制台警告。
• 给符号匹配添加默认值，防止未匹配时出现异常。

补充说明 #

如果你的CamelCaseToSentence函数能正确将'signs'转换为'Signs'，头部标题会自动适配。另外，建议用键名+值的组合作为列表项key（而非索引），数组顺序变化时能提升渲染性能。

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