如何在Cloud Firestore中使用startAt()和endAt()？求等效实现方案

Hey there! Totally get how frustrating it can be hunting for equivalent code across Firebase's two databases—let's get this sorted for you. First, let's cover the startAt() and endAt() methods in Cloud Firestore, then we can talk about adapting your Realtime Database code over.

First off, these methods work similarly to their Realtime Database counterparts, but there's one critical rule: you must pair them with an orderBy() clause (Firestore doesn't assume any default ordering for your data). They let you define a range of results to fetch, based on the field you've sorted by.

Example 1: Querying by string range #

Say you have a users collection, and you want to fetch every user whose name falls between "Alice" and "Charlie" (inclusive):

// Web (JavaScript) example
import { collection, query, orderBy, startAt, endAt, getDocs } from "firebase/firestore";

// Assume 'db' is your initialized Firestore instance
const userQuery = query(
  collection(db, "users"),
  orderBy("name"), // Sort by the 'name' field first
  startAt("Alice"), // Start including results at "Alice"
  endAt("Charlie")  // Stop including results at "Charlie"
);

// Fetch the results
const querySnapshot = await getDocs(userQuery);
querySnapshot.forEach((doc) => {
  console.log(`${doc.id}:`, doc.data());
});

Example 2: Querying by numeric range #

If you're working with numbers (like ages), the pattern is identical—just pass numeric values to startAt() and endAt():

const ageRangeQuery = query(
  collection(db, "users"),
  orderBy("age"),
  startAt(18),
  endAt(30)
);

Bonus: Pagination with document snapshots #

You can also pass a DocumentSnapshot to startAt() or endAt() for pagination. For example, if you want to fetch the next set of results after the last document from your first query:

// Get the last visible document from your initial query
const lastVisibleDoc = querySnapshot.docs[querySnapshot.docs.length - 1];

// Create a new query starting right after that document
const nextPageQuery = query(
  collection(db, "users"),
  orderBy("name"),
  startAt(lastVisibleDoc)
);

Since you didn't share the exact Realtime Database code you're trying to port, I'll cover some common patterns to help you map things over:

• Data structure difference: Realtime Database uses a nested JSON tree, while Firestore is a flat document-collection model. You might need to adjust your data structure (denormalization is still useful here, but think in terms of collections and documents instead of nested paths).
• Read operations: Realtime DB's orderByChild().startAt() maps directly to Firestore's orderBy().startAt() as shown above. The main difference is that Firestore requires you to target a collection instead of a nested path.
• Realtime listeners: Instead of onValue() in Realtime DB, use onSnapshot() in Firestore to listen for realtime updates to your query results.

Example: Porting a Realtime DB listen query #

Suppose your Realtime Database code looks like this:

// Realtime Database code
import { ref, query, orderByChild, startAt, endAt, onValue } from "firebase/database";

const dbRef = ref(db, "users");
const nameRangeQuery = query(dbRef, orderByChild("name"), startAt("Alice"), endAt("Charlie"));

onValue(nameRangeQuery, (snapshot) => {
  snapshot.forEach((childSnap) => {
    console.log(childSnap.val());
  });
});

Here's the equivalent Firestore code with a realtime listener:

// Firestore equivalent
import { onSnapshot } from "firebase/firestore";

const userQuery = query(
  collection(db, "users"),
  orderBy("name"),
  startAt("Alice"),
  endAt("Charlie")
);

onSnapshot(userQuery, (querySnap) => {
  const users = [];
  querySnap.forEach((doc) => {
    users.push({ id: doc.id, ...doc.data() });
  });
  console.log("Updated user list:", users);
});

If you can share the specific Realtime Database code you're trying to replicate, I can give you an even more precise Firestore equivalent!

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