如何从Notion API数据库查询结果中提取page_id与对应页面标题？

实现逻辑 #

1. 无需关心properties下的动态属性名，直接通过Object.values()提取所有属性配置
2. 过滤出唯一type为title的标题属性
3. 嵌套读取标题文本，加入边界兼容处理避免空值报错
4. 组装需要的字段，支持直接输出数组（更适配JSX渲染）或你需要的对象结构

代码实现 #

// 假设notionApiResult为调用Notion数据库查询接口返回的完整结果
const pageList = notionApiResult.results.map(page => {
  // 提取所有属性，跳过动态属性名匹配
  const allProperties = Object.values(page.properties);
  // 找到唯一的标题属性
  const titleProperty = allProperties.find(item => item.type === 'title');
  // 提取标题文本，兼容空标题场景
  const pageTitle = titleProperty?.title?.[0]?.plain_text || '';
  return {
    page_id: page.page_id || page.id, // 兼容API返回字段差异
    page_title: pageTitle
  };
});

// 如需转换为你示例中以pageN为键的对象格式，可追加如下处理
const pagesObj = pageList.reduce((result, current, index) => {
  result[`page${index + 1}`] = current;
  return result;
}, {});

JSX 渲染示例 #

直接使用处理后的pageList数组即可遍历渲染：

<div className="notion-page-list">
  {pageList.map(page => (
    <div key={page.page_id} className="page-item">
      <p>页面ID：{page.page_id}</p>
      <p>页面标题：{page.page_title}</p>
    </div>
  ))}
</div>

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