Firebase react native flatlist keyExtractor

Question

Im displaying some firebase data in a flatlist and im having trouble with the keyExtractor, I keep having the error:

undefined is not an object (evaluating "item.id") I have added an id field to all my data in firebase and made sure they were a string but it's still not recognizing it as an id.

function Squad() {
  const [gk, setGk] = useState([]);

  useEffect(() => {
    db.collection('squad').orderBy('position').get().then(snapshot => {
      const gkData = snapshot.map(doc => {
        const playerObject = doc.data();
        return { name: playerObject.name, number: playerObject.number, id: playerObject.id };
      });
      setGk(gkData);
      console.log(setGk);
    });
  }, []);

  const Item = ({ name, number }) => (
    <View style={styles.item}>
      <Text style={styles.itemText}>{number} - {name}</Text>
    </View>
  );

  const renderItem = ({ item }) => (
    <Item name={item.name} number={item.number} />
  )

  return(
    <View>
      <View style={globalStyles.bar}>
        <Text style={globalStyles.barText}>goalkeeper</Text>
      </View>
      <FlatList 
        data={setGk}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </View>
  )
}

Answer 1

The data you are passing into the Flatlist is the setter function! You want to pass in 'gk' not 'setGk'