Next.js 13.4电商搜索过滤器故障排查与修复请求

1. 先定位报错核心信息 #

优先查看浏览器控制台的具体报错内容（比如NaN类型错误、API请求400、参数类型不匹配等），这是快速定位问题的核心依据。以下是基于常见场景的针对性排查步骤：

2. 修正filter.tsx中的价格输入处理 #

价格输入框默认返回字符串值，直接传递会导致后续逻辑报错，需做类型转换与合法性校验：

// 错误写法：直接传递字符串值
const handleMinPriceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setMinPrice(e.target.value); // 字符串类型，后续计算/请求会触发类型错误
};

// 正确处理：转数字+空值/无效值校验
const handleMinPriceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const inputValue = e.target.value.trim();
  const numValue = inputValue ? Number(inputValue) : undefined;
  
  // 校验输入是否为有效数字
  if (inputValue && isNaN(numValue)) {
    // 可添加用户提示："请输入有效的数字价格"
    return;
  }
  
  // 同步到状态（确保状态为数字/undefined类型）
  setMinPrice(numValue);
};

同时添加价格区间合法性校验：比如输入的最小价格不能大于最大价格，实时提示用户。

3. 校验Zustand状态的类型一致性 #

确保状态定义与更新逻辑的类型统一，避免字符串与数字混合：

// Zustand Store示例
const useFilterStore = create((set) => ({
  minPrice: undefined as number | undefined,
  maxPrice: undefined as number | undefined,
  // 严格限制更新参数类型
  setMinPrice: (price: number | undefined) => set({ minPrice: price }),
  setMaxPrice: (price: number | undefined) => set({ maxPrice: price }),
}));

同步URL参数时，跳过无效值：比如minPrice为undefined时，不在URL中携带该参数，避免传递空字符串或NaN。

4. 修正page.ts中的URL参数解析 #

从URL查询参数获取价格时，必须做类型转换与有效性校验：

const searchParams = new URLSearchParams(request.nextUrl.search);

// 错误写法：直接获取字符串
// const minPrice = searchParams.get('minPrice');

// 正确处理：转数字+空值判断
const minPriceStr = searchParams.get('minPrice');
const minPrice = minPriceStr ? Number(minPriceStr) : undefined;

// 过滤无效数字
if (minPrice !== undefined && isNaN(minPrice)) {
  minPrice = undefined;
}

5. 排查route.ts中的API请求逻辑 #

确保传递给后端的参数为有效数字，避免传递无效值导致接口报错：

// 组装请求参数时过滤无效值
const filterParams = {
  ...otherSearchParams,
  // 仅当值为有效数字时才携带
  ...(minPrice !== undefined && !isNaN(minPrice) && { minPrice }),
  ...(maxPrice !== undefined && !isNaN(maxPrice) && { maxPrice }),
};

// 发起请求
const res = await fetch(`/api/products?${new URLSearchParams(filterParams)}`);

同时确认后端接口对价格参数的类型要求，确保前后端参数类型一致（比如后端要求数字类型，就不能传字符串）。

6. 优化状态同步时机 #

• 避免输入过程中频繁触发API请求，可添加防抖逻辑，或在用户点击「应用筛选」按钮时再同步状态与发起请求。
• 确保Zustand状态与URL参数完全同步，避免出现状态与参数不一致导致的逻辑冲突。

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