求助：基于Firebase Firestore的关键词相似搜索功能实现（附代码）

Let's break down the issues in your code and refine the search feature step by step:

Key Issues in Your Current Implementation #

• Broken Firestore Query: Your get() callback doesn't capture the query snapshot, and you're trying to access db.docs instead of the snapshot's docs. This means you're never actually fetching or storing any data from Firestore.
• Async State Race Conditions: You update searchDetails then immediately use it for your query—but React state updates are asynchronous, so you're working with stale values here. Always use the direct searchTerm parameter instead.
• Stale Navigation Params: When navigating to SearchResults, you're passing data from state, which might not have finished updating yet. You should pass the fresh data you just fetched instead.
• Unoptimized Input Triggers: Every keystroke fires a Firestore request, which is inefficient. Adding debouncing will reduce unnecessary calls.

Fixed & Improved Code #

import React, { useState, useRef, useCallback } from 'react';
import { View, FlatList, Text, TouchableOpacity } from 'react-native';
import { SearchBar } from 'react-native-elements';
import firebase from 'firebase/app';
import 'firebase/firestore';

// Debounce helper to limit query frequency
const debounce = (func, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
};

const SearchScreen = (props) => { 
  const [searchDetails, setSearchDetails] = useState(''); 
  const [data, setData] = useState([]); 
  const [recent, setRecent] = useState(true); 
  const inputRef = useRef(); 

  // Debounced search to avoid excessive Firestore calls
  const debouncedSearch = useCallback(debounce(async (searchTerm) => {
    setRecent(false);
    setSearchDetails(searchTerm);

    // Clear results if search term is empty
    if (!searchTerm.trim()) {
      setData([]);
      return;
    }

    try {
      const db = firebase.firestore().collection('Posts');
      const snapshot = await db
        .orderBy('name')
        .startAt(searchTerm)
        .endAt(searchTerm + "\uf8ff")
        .get();

      const fetchedData = snapshot.docs.map(doc => ({
        ...doc.data(),
        postId: doc.id // Ensure postId exists (fallback to document ID)
      }));
      setData(fetchedData);
    } catch (error) {
      console.error('Error fetching search results:', error);
      setData([]);
    }
  }, 300), []); // 300ms delay - adjust based on user experience needs

  const searchFilterFunction = (searchTerm) => {
    debouncedSearch(searchTerm);
  };

  const handleSearchResults = useCallback(async (name) => {
    // Add to recent searches if not in recent mode
    if (!recent) {
      dispatch(searchRecent(name));
    }

    // Ensure we have fresh data before navigating
    let searchData = data;
    if (!searchData.length && name.trim()) {
      const db = firebase.firestore().collection('Posts');
      const snapshot = await db
        .orderBy('name')
        .startAt(name)
        .endAt(name + "\uf8ff")
        .get();
      searchData = snapshot.docs.map(doc => ({
        ...doc.data(),
        postId: doc.id
      }));
    }

    props.navigation.navigate("SearchResults", {
      searchDetails: name,
      searchData: searchData,
    });
  }, [recent, data, dispatch, props.navigation]);

  const renderItem = ({ item }) => (
    <TouchableOpacity 
      style={{ padding: 15, borderBottomWidth: 1, borderBottomColor: '#eee' }}
      onPress={() => handleSearchResults(item.name)}
    >
      <Text>{item.name}</Text>
    </TouchableOpacity>
  );

  return ( 
    <View style={{ flex: 1 }}> 
      <SearchBar 
        placeholder="Search Recipe or ingredient." 
        onChangeText={(text) => searchFilterFunction(text)} 
        value={searchDetails} 
        ref={inputRef} 
        onSubmitEditing={() => handleSearchResults(searchDetails)} 
        clearIcon={{ color: '#888' }}
      /> 
      {/* Show auto-suggest results only if there's data */}
      {data.length > 0 && (
        <FlatList 
          showsVerticalScrollIndicator={false} 
          data={data} 
          keyExtractor={(item) => item.postId} 
          renderItem={renderItem} 
        />
      )}
    </View> 
  ); 
}; 

export default SearchScreen;

What Changed & Why #

1. Fixed Firestore Query: We now properly capture the snapshot from get(), map over snapshot.docs to extract data, and ensure postId is included (falling back to the document ID if it's not stored in the document data).
2. Added Debouncing: The debounce helper limits Firestore queries to once every 300ms after the user stops typing, cutting down on unnecessary network calls.
3. Eliminated State Race Conditions: We use the direct searchTerm parameter instead of relying on the asynchronous searchDetails state for queries, ensuring we always use the latest input value.
4. Reliable Navigation Params: When submitting, we check if we have fresh data—if not, we fetch it immediately to guarantee we pass the most up-to-date results to the next screen.
5. Added Error Handling: Wrapped the Firestore call in a try/catch block to log and handle errors gracefully, preventing silent failures.
6. Interactive Auto-Suggest: Added touch handlers to the FlatList items so users can tap auto-suggest results to navigate directly to the results screen.

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