React中Firebase数据库酒店标题搜索函数报错，求解决方案

核心问题 #

1. 原始数据丢失导致筛选失效
   你直接用当前的hotel状态做筛选，第一次筛选后hotel会被替换成筛选结果，后续搜索只能在这个子集里匹配，无法回到全部数据，而且会彻底丢失原始数据源。

2. 未处理空值引发报错
   如果Firebase返回的酒店数据中存在Title为null/undefined的项，调用toLowerCase()会直接抛出类型错误，这就是你看到filter处报错的原因。

3. 箭头函数写法易混淆
   用=>()包裹多条语句的写法可读性差，容易让逻辑执行顺序出现问题。

解决步骤 #

1. 保存原始数据副本 #

在获取Firebase数据时，同时保存一份原始数据的副本，后续所有筛选操作都基于这份原始数据：

// 组件内定义两个状态：当前展示数据、原始全量数据
const [hotel, setHotel] = useState<{Title: string}[]>([]);
const [originalHotels, setOriginalHotels] = useState<{Title: string}[]>([]);

// 从Firebase拉取数据的函数示例
const fetchAllHotels = async () => {
  // 替换成你实际的Firebase数据获取逻辑
  const response = await fetchFirebaseHotels();
  setHotel(response);
  setOriginalHotels(response); // 保存原始全量数据
};

2. 修改搜索函数逻辑 #

基于原始数据筛选，增加空值判断，调整函数写法：

const SearchHotel = (e: { preventDefault: () => void; }) => {
  e.preventDefault();
  const lowerSearch = search.toLowerCase();
  // 基于原始数据筛选，避免丢失数据源
  const filteredHotels = originalHotels.filter(item => {
    // 先判断Title是否存在，防止调用toLowerCase时报错
    return item.Title?.toLowerCase().includes(lowerSearch) ?? false;
  });
  setHotel(filteredHotels);
};

3. 额外排查点 #

• 确认search状态已正确绑定到输入框，确保输入内容能实时更新search的值。
• 检查Firebase返回数据的Title字段键名是否和代码一致（注意大小写，比如数据库是title而代码写Title会导致匹配失败）。

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