FirebaseExtended / FirebaseExtended/reactfire

Usage of useUser with useFirestoreDocData not very compatible within custom hooks

Aperta
#423 4 commenti 5 reazioni 0 assegnatari Vedi su GitHub
v5
Lingua principale
TypeScript
Stelle
3.6k
Fork
403
Merge medio
14h 53m
PR unite (30g)
5

Descrizione

### Version info

**React:** 18 experimental

**Firebase:** 9

**ReactFire:** 4

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

### Test case

### Steps to reproduce

```
const useMyHook= () => {

const firestore = useFirestore();
const {data: user} = useUser();
const ref = user && doc(firestore, "users", user.uid);
const {data: userData} = useFirestoreDocData(ref);

return userData;
}
```

### Behavior

Since useUser is returning the type `User | null` , we need to check, if the user is available. But in the case when the user is null, useFirestoreDocData cannot be called, since the ref would not exist. In react we are not allowed to write:
` const {data: userData} = ref && useFirestoreDocData(ref) `

One way to get around this issue is by passing in the user as a prop, but it does not seem to be convenient, if one wants to use this hook within another hook. We would just push the issue upwards until we reach a component that is again wrapped by a component that knows if the user exists:

- component that checks if user exists (like deprecated AuthCheck)
- component that is rendered when user exists
- hook that is called within that component

Another alternative for typescript is writing `user!` with exclamation mark, but this does not feel proper.

I hope the case is clear and you might know a better way to deal with it.
I think with react-fire v3 (fb v8) I wasn't experiencing this issue. Since it was probably solved with this issue: https://github.com/FirebaseExtended/reactfire/issues/249

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Start by tracing the useUser, useFirestore, and useFirestoreDocData entry points and reproduce the null-user path with the custom hook shown in the issue. Compare the reported ReactFire v4 behavior with the ReactFire v3 behavior referenced in issue 249; the issue does not name a file, test, or concrete completion criterion.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
firebase, react, typescript
Ambito
authentication, database, frontend
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Da chiarire
Idoneità per principianti
25/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.