分页可以使用 startAt()

// Get Items.
async fetchUsers = () => {

  // State.
  const {users, usersPerPage} = this.state

  // Last Visible.
  const lastVisible = users && users.docs[users.docs.length - 1]

  // Query.
  const query = firestore.collection('Users')
    .orderBy('email')
    .startAfter(lastVisible)
    .limit(usersPerPage)

  // Users.
  const users = await query.get()

  // ..
  return this.setState({users})

}

// Did Mount.
componentDidMount() {
  this.fetchUsers()
}

// Did Update.
componentDidUpdate(prevProps, prevState) {
  const isDifferentPage = this.state.currentPage !== prevState.currentPage
  if (isDifferentPage) this.fetchUsers()
}

任何不熟悉Firestore和Firestore Pagination with ReactJS 的人都会有点困惑，无法理解 Pagination 的工作原理或何时触发对 firestore 中下一组文档的调用。任何像这样挣扎的人试试我的例子来提出一些想法并提前处理。（我使用React-Bootstrap来呈现 UI 元素）

01 - 安装包react-infinite-scroll-component

首先安装这个包 yarn add react-infinite-scroll-component

02 - 包括包裹

通过'import InfiniteScroll from 'react-infinite-scroll-component';'导入将其包含到您的文件中

03 - 初始状态

使用空列表数组启动状态

this.state = {
    list: [],
};

04 - 创建函数以获取第一组数据并使用组件启动它确实挂载

//component did mount will fetch first data from firestore 
componentDidMount(){
    this.getUsers()
}

getUsers(){
  let set = this
  //initiate first set
  var first = set.ref.collection("users").limit(12);
  first.get().then(function (documentSnapshots) {
    // Get the last visible document
    var lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1];
    //initiate local list 
    const list = [];
    documentSnapshots.forEach(function(doc) {
        //im fetching only name and avatar url you can get any data 
        //from your firestore as you like
        const { name, avatar_full_url } = doc.data();
        //pushing it to local array
        list.push({ key: doc.id, name, avatar_full_url });
    });
        //set state with updated array of data 
        //also save last fetched data in state
        set.setState({ list, last: lastVisible });
    });
}

05 - 创建函数以获取余额数据集

fetchMoreData = () => {
  let set = this
  //get last state we added from getUsers()
  let last = this.state.last
  var next = set.ref.collection("users").startAfter(last).limit(12);
  next.get().then(function (documentSnapshots) {
  // Get the last visible document
  var lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1];
  const list = [];
  documentSnapshots.forEach(function(doc) {
    //im fetching only name and avatar url you can get any data 
    //from your firestore as you like
    const { name, avatar_full_url } = doc.data();
    list.push({ key: doc.id, name, avatar_full_url });
  });
  //set state with updated array of data 
  //also save last fetched data in state
  let updated_list = set.state.list.concat(list);
  set.setState({ list: updated_list, last: lastVisible });
  });
};

06 - 渲染用户界面

<InfiniteScroll 
  dataLength={this.state.list.length}
  next={this.fetchMoreData}
  hasMore={true}
  loader={<span className="text-secondary">loading</span>}>
    <Row className="mt-3">
      { this.state.list.map((single, index) => (
      <Col lg={4} key={ index }>
        <div>
          <Image src={ single.avatar_full_url }roundedCircle width="100" />
          <h2>{ single.name }</h2>
        </div>
      </Col>
      ))}
    </Row>  
</InfiniteScroll>

为此使用 startAt() 或 startAfter()

firestore
 .collection("Users")
 .startAt(0)
 .limit(10)
 .get()

检查这个例子这可以帮助任何尝试上一个/下一个分页的人

//initial state
const [list, setList] =  useState([]);
const [page, setPage] =  useState(1);

//loading initial data
useEffect(() => {
    const fetchData = async () => {
        await firebase.firestore().collection('users')
            .orderBy('created', 'desc') //order using firestore timestamp
            .limit(5) //change limit value as your need
            .onSnapshot(function(querySnapshot) { 
                var items = [];
                querySnapshot.forEach(function(doc) {
                    items.push({ key: doc.id, ...doc.data() });
                });
                setList(items);
            })
    };
    fetchData();
}, []);

加载初始数据后使用以下功能进行下一个按钮触发

//next button function
    const showNext = ({ item }) => {
        if(list.length === 0) {
            //use this to show hide buttons if there is no records
        } else {
            const fetchNextData = async () => {
                await firebase.firestore().collection('users')
                    .orderBy('created', 'desc') //order using firestore timestamp
                    .limit(5) //change limit value as your need
                    .startAfter(item.created) //we pass props item's first created timestamp to do start after you can change as per your wish
                    .onSnapshot(function(querySnapshot) {
                        const items = [];
                        querySnapshot.forEach(function(doc) {
                            items.push({ key: doc.id, ...doc.data() });
                        });
                        setList(items);
                        setPage(page + 1) //in case you like to show current page number you can use this
                    })
            };
            fetchNextData();
        }
    };
    

然后上一个按钮功能

//previous button function
const showPrevious = ({item}) => {
    const fetchPreviousData = async () => {
        await firebase.firestore().collection('users')
            .orderBy('created', 'desc')
            .endBefore(item.created) //this is important when we go back
            .limitToLast(5) //this is important when we go back
            .onSnapshot(function(querySnapshot) {
                const items = [];
                querySnapshot.forEach(function(doc) {
                    items.push({ key: doc.id, ...doc.data() });
                });
                setList(items);
                setPage(page - 1)
            })
    };
    fetchPreviousData();
};

最后创建列表视图和两个这样的按钮

 {
    //list doc's here this will come inside return (place this code inside table)
    list.map((doc) => (
        <tr key={doc.key}>
            <td>{ doc.name }</td>
            <td>{ doc.age }</td>
            <td>{ doc.note }</td>
        </tr>
    ))
}


{
    //show previous button only when we have items
    //pass first item to showPrevious function 
    page === 1 ? '' : 
    <Button onClick={() => showPrevious({ item: list[0] }) }>Previous</Button>
}

{
    //show next button only when we have items
    //pass last item to showNext function 
    list.length < 5 ? '' :
    <Button onClick={() => showNext({ item: list[list.length - 1] })}>Next</Button>
}

这就是检查我的代码注释，您可以根据需要进行更改。这就是使用 Firebase FireStore 进行分页时会发生的情况。您可以根据需要使用创建自定义钩子来重用这些组件。

希望这可以帮助某人所以我在这里做了一个要点检查