UI 数据不会在 nextjs firestore 中实时更改

Question

我正在尝试使用 nextjs 和 firebase firestore 实时进行更改。但是我确实需要重新加载才能看到更改。

const [getUsers, setUsers] = useState("");

const checkStatus = async (collectionName, valueFieldName, setterName) => {
    const q = query(
      collection(db, collectionName),
      where("isVerified", "==", valueFieldName)
    );
    const snapshot = await getCountFromServer(q);
    setterName(snapshot.data().count);
  };

我正在使用参数调用正文中的函数

checkStatus("users", "false", setUsers);

我正在尝试通过

显示它

<h1> user counter in realtime: {getUsers} </h1>