CODEWITHSUNDEEP
reactjstypescriptfirebase
Le Moi
Le Moi

Reputation: 1025

Correct Typescript types for Firebase in a React app

I am confused as to how to correctly add Typescript types for Firebase to a React app?

I am getting the following error:

Argument of type '({ firebase }: Props) => Element' is not assignable to parameter of type 'ComponentType<{}>'. Type '({ firebase }: Props) => Element' is not assignable to type 'FunctionComponent<{}>'. Types of parameters '__0' and 'props' are incompatible. Property 'firebase' is missing in type '{ children?: ReactNode; }' but required in type 'Props'.ts(2345)

This is with the following component:

import React from 'react'
import { withFirebase } from '../Firebase'

interface Props {
  firebase: firebase.app.App
}

const Admin = ({ firebase }: Props) => {
  const [isLoading, setIsLoading] = React.useState(false)
  const [users, setUsers] = React.useState<U[]>([])

  React.useEffect(() => {
    console.log(typeof firebase)
    setIsLoading(true)

    const usersRef = firebase.database().ref(`users/`)

    usersRef.on(`value`, (snapshot: any) => {
      const usersObj = snapshot.val()
      const usersLi = Object.keys(usersObj).map(key => ({
        ...usersObj[key],
        uid: key,
      }))
      setUsers(usersLi)
    })

    setIsLoading(false)

    return () => usersRef.off()
  }, [firebase])

  return (
    <div>
      <h1>Admin</h1>
      {isLoading && <p>Fetching data...</p>}

      <UserList users={users} />
    </div>
  )
}

interface U {
  uid: string
  username: string
  email: string
}

interface UL {
  users: U[]
}

const UserList = ({ users }: UL) => (
  <ul>
    {users.map(user => (
      <li
        key={user.uid}
        style={{
          borderBottom: '1px solid #f4f4f4',
          paddingBottom: '10px',
          marginBottom: '10px',
        }}
      >
        <span style={{ display: 'block' }}>
          <strong>ID:</strong> {user.uid}
        </span>
        <span style={{ display: 'block' }}>
          <strong>username:</strong> {user.username}
        </span>
        <span style={{ display: 'block' }}>
          <strong>Email:</strong> {user.email}
        </span>
      </li>
    ))}
  </ul>
)

export default withFirebase(Admin)

Looking at the @types/firebase npm package, it says Firebase now provides it's own types. But I am just unsure how to set this up properly.

Thanks so much.

Upvotes: 2

Views: 6165

Answers (1)

Le Moi
Le Moi

Reputation: 1025

Turns out, the issue was my HOC withFirebase:

import React from 'react'

const FirebaseContext = React.createContext()

export const withFirebase = Component => (props: any) => (
  <FirebaseContext.Consumer>
    {firebase => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
)

export default FirebaseContext

The issue was I wasn't providing a Type to createContext: React.createContext<firebase.app.App>, and I needed to pass an instance of the firebaseApp to createContext, making it like so:

const FirebaseContext = React.createContext<firebase.app.App>(firebaseApp)

I also needed to add a Type for the Component, making withFirebase:

import React from 'react'
import firebaseApp from './firebase'

const FirebaseContext = React.createContext<firebase.app.App>(firebaseApp)

export const withFirebase = (
  Component: React.ComponentType<{ firebase: firebase.app.App }>,
) => (props: any) => (
  <FirebaseContext.Consumer>
    {firebase => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
)

export default FirebaseContext

Upvotes: 3

Related Questions