Cannot import type?? import { DocumentData } from "firebase/firestore";

[ChurikiTenna]

Operating System

Mac

Browser Version

Safari

Firebase SDK Version

9.15.0

Firebase SDK Product:

Firestore

Describe your project's tooling

Nuxt3 with vues

Describe the problem

When I try to get DocumentData type like this in due file,

<script setup lang="ts">
import { DocumentData } from "firebase/firestore";

These seem to not produce any errors:
import { DocumentData } from "@firebase/firestore-types";
import type { DocumentData } from "firebase/firestore/lite";
Though it fails on localhost page.

It fails with Module '"firebase/firestore"' has no exported member 'DocumentData'.ts(2305).

Where can I import DocumentData from??

Steps and code to reproduce issue

install firebase v9 modules, then try to impoty DocumentData as below:

import { DocumentData } from "firebase/firestore";

[jbalidiong]

Hi @ChurikiTenna, thank you for bringing this to our attention. I was able to reproduce the behavior mentioned. I'll raise it to our Firestore team or bring someone here that can provide more context about it. I’ll update this thread if I have any information to share.

[dconeybe]

tl;dr I'm pretty sure that using import type {...} instead of import {...} is the correct thing to do here.

What is happening is that the import

import { DocumentData } from "firebase/firestore";

is being emitted verbatim into the resulting JavaScript as this:

import { DocumentData } from "/_nuxt/node_modules/.cache/vite/client/deps/firebase_firestore.js?t=1717186743362&v=d2fdd362";

The thing is, DocumentData is a TypeScript interface and is simply not present in Firestore's compiled JavaScript; it only exists in Firestore's .d.ts file. So the import fails because the nuxt emitted JavaScript is trying to import DocumentData as if it were something present in Firestore's compiled JavaScript. If you were to change DocumentData to a concrete class that is part of Firestore's compiled JavaScript, such as CollectionReference, then the import would succeed.

By changing the import to

import type { DocumentData } from "firebase/firestore";

this enables using it in the TypeScript code to be used for compile-time type checking but correctly omits the import from the compiled JavaScript. This is the CORRECT thing to do for any types that you import that are only used for type checking.

I'm going to close this issue since this does not appear to be a bug in this GitHub repository. But feel free to continue the discussion if you think otherwise.