Next.js 13.4服务端组件：移除API请求中的undefined参数

方案一：用URLSearchParams构建查询字符串（推荐） #

URLSearchParams是JS内置工具，能自动过滤空值和undefined，处理查询字符串省心高效。修改后的代码如下：

import { getAllProductsRequest } from "../../APIRequest/products/productsApi";
import Product from "../../components/common/product/product";
import DrawerComponents from "./_components/drawer";
import Filter from "@components/common/filter/filter";

const Store = async ({ searchParams }) => {
  const searchKeyword = searchParams.search || "0";
  // 把要传递的参数整理成对象
  const params = {
    min: searchParams.min,
    max: searchParams.max,
    brand: searchParams.brand,
    category: searchParams.category
  };

  // 过滤掉值为undefined的属性
  const filteredParams = Object.fromEntries(
    Object.entries(params).filter(([_, value]) => value !== undefined)
  );

  // 转成标准查询字符串
  const queryString = new URLSearchParams(filteredParams).toString();
  // 拼接最终参数：有查询字符串就用&连接，没有就只保留searchKeyword
  const finalParams = queryString ? `${searchKeyword}&${queryString}` : searchKeyword;

  let data = await getAllProductsRequest(1, 100, finalParams);

  if (data?.total?.length < 1) {
    return (
      <div className="container">
        <h1 className="text-2xk">No products available</h1>
      </div>
    );
  }
  return (
    <div className="px-3 py-8 mx-auto ">
      
    </div>
  );
};

export default Store;

核心逻辑：

• 先把所有参数放进对象统一处理
• 用Object.entries和filter剔除值为undefined的键值对
• 借助URLSearchParams生成合法查询字符串，最后和searchKeyword拼接

方案二：手动拼接参数（适合简单场景） #

如果不想用内置API，也可以手动判断每个参数是否存在后再拼接：

import { getAllProductsRequest } from "../../APIRequest/products/productsApi";
import Product from "../../components/common/product/product";
import DrawerComponents from "./_components/drawer";
import Filter from "@components/common/filter/filter";

const Store = async ({ searchParams }) => {
  const searchKeyword = searchParams.search || "0";
  const min = searchParams.min;
  const max = searchParams.max;
  const brand = searchParams.brand;
  const category = searchParams.category;

  // 初始化参数数组，先放必填的searchKeyword
  const paramParts = [searchKeyword];
  
  // 逐个判断参数，存在才加入数组
  if (min !== undefined) paramParts.push(`min=${min}`);
  if (max !== undefined) paramParts.push(`max=${max}`);
  if (brand !== undefined) paramParts.push(`brand=${brand}`);
  if (category !== undefined) paramParts.push(`category=${category}`);

  // 用&连接所有有效参数
  const finalParams = paramParts.join('&');

  let data = await getAllProductsRequest(1, 100, finalParams);

  if (data?.total?.length < 1) {
    return (
      <div className="container">
        <h1 className="text-2xk">No products available</h1>
      </div>
    );
  }
  return (
    <div className="px-3 py-8 mx-auto ">
      
    </div>
  );
};

export default Store;

核心逻辑：

• 用数组存储所有有效参数片段
• 只把有值的参数转成key=value格式加入数组
• 最后用&连接数组元素，避免出现带undefined的无效参数

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