如何在Next.js应用程序中对Firebase中的数据进行分页？

import firebase from 'firebase/app';
import 'firebase/firestore';

if (!firebase.apps.length) {
  firebase.initializeApp({
    // Your Firebase configuration
  });
}

const firestore = firebase.firestore();

const PAGE_SIZE = 10; // 每页显示的数据数量

const fetchData = async (startAfter) => {
  let query = firestore.collection('your_collection').orderBy('timestamp').limit(PAGE_SIZE);

  if (startAfter) {
    query = query.startAfter(startAfter);
  }

  const snapshot = await query.get();
  const data = snapshot.docs.map((doc) => doc.data());

  return data;
};

import { useState, useEffect } from 'react';

const YourComponent = () => {
  const [data, setData] = useState([]);
  const [startAfter, setStartAfter] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const newData = await fetchData(startAfter);
      setData((prevData) => [...prevData, ...newData]);
    };

    fetchData();
  }, [startAfter]);

  const handleLoadMore = () => {
    const lastData = data[data.length - 1];
    setStartAfter(lastData.timestamp);
  };

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
      <button onClick={handleLoadMore}>Load More</button>
    </div>
  );
};