React映射数组时如何跳过null元素？Next.js+无头WordPress场景

一、数组出现null元素的常见原因 #

• WordPress后台中部分文章处于草稿/私密状态，或是被移至回收站（软删除），通过REST API获取时这类内容会返回null
• 调用WordPress默认API时未指定状态过滤参数，默认请求可能包含了非发布状态的内容，导致部分条目解析为null
• 若使用了自定义API端点，可能是后端查询逻辑存在漏洞，未处理空查询结果直接返回null

二、跳过null元素的解决方法 #

1. 前端获取数据后直接过滤 #

拿到原始posts数组后，用filter()方法剔除null项：

// 过滤null后的有效文章数组
const validPosts = posts.filter(post => post !== null);

后续渲染逻辑直接使用validPosts即可。

2. 请求API时添加状态过滤（从源头避免null） #

调用WordPress默认REST API时，通过status参数限定只获取已发布的文章：

// Next.js的getStaticProps/getServerSideProps中示例
const res = await fetch('https://your-wp-site.com/wp-json/wp/v2/posts?status=publish');
const posts = await res.json();

这种方式能减少前端不必要的处理，直接拿到有效数据。

3. 自定义WordPress API端点（复杂场景） #

如果默认API参数无法满足需求，可在WordPress主题的functions.php中注册自定义端点，添加更严格的查询规则：

add_action('rest_api_init', function () {
  register_rest_route('custom/v1', '/published-posts', [
    'methods' => 'GET',
    'callback' => 'return_published_posts',
  ]);
});

function return_published_posts() {
  $query_args = [
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => 10, // 按需调整数量
  ];
  $posts_query = new WP_Query($query_args);
  return $posts_query->posts;
}

前端请求该自定义端点即可获取纯净的已发布文章数据。

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