useFirestoreDocData returns status: "success" for wrong document

[mmmulani]

Version info

React: react-16.14.0

Firebase: firebase-7.21.0

ReactFire: reactfire-3.0.0-rc.0

Other (e.g. Node, browser, operating system) (if applicable):

Test case

import React from "react";
import { useState, useEffect } from "react";
import { useFirestore, useFirestoreDocData } from "reactfire";

const DOCUMENT_IDS = ["lyDiZdJoItgaHLVM4f2g", "dE4u1v30VSd84u9LQgaR"];

function TestBug() {
  const [idToLoad, setIdToLoad] = useState(0);
  const docRef = useFirestore().collection("images").doc(DOCUMENT_IDS[idToLoad]);
	const doc = useFirestoreDocData(docRef, { idField: "documentID" });

  useEffect(() => {
    setTimeout(() => {
      setIdToLoad((idToLoad + 1) % 2);
    }, 2000);
  }, [idToLoad]);

  console.log('id to load', DOCUMENT_IDS[idToLoad]);
  console.log('loaded doc', doc.status, doc.data?.documentID);

  return null;
}

export default TestBug;

Steps to reproduce

Include the TestBug component somewhere in your view hierarchy and change the DOCUMENT_IDS and "images" to actual documents in your instance. Check the console log for output.

Expected behavior

useFirestoreDocData will return status: "success" only when data is populated with the doc ref passed in.

Actual behavior

In this case, useFirestoreDocData returns status: "success" with the data field populated with the previous document requested. You can see this from the console log of:

TestBug.js:18 id to load lyDiZdJoItgaHLVM4f2g
TestBug.js:19 loaded doc loading undefined
// loading the first doc
TestBug.js:18 id to load lyDiZdJoItgaHLVM4f2g
TestBug.js:19 loaded doc success lyDiZdJoItgaHLVM4f2g
// loaded first doc, the requested document and returned document are the same
TestBug.js:18 id to load dE4u1v30VSd84u9LQgaR
TestBug.js:19 loaded doc success lyDiZdJoItgaHLVM4f2g
// loading the second doc but it still returns the first document. the requested document and returned document are not the same!
TestBug.js:18 id to load dE4u1v30VSd84u9LQgaR
TestBug.js:19 loaded doc success dE4u1v30VSd84u9LQgaR
// finally, the second doc has loaded and now the requested document and returned document are the same