Скачать или смотреть Fixing FirebaseError When Upgrading from Firebase 7 to 9 in a React Chat App

Learn how to resolve the `DocumentReference` error while upgrading your React-based chat app from Firebase 7 to Firebase 9, with step-by-step code examples.
---
This video is based on the question https://stackoverflow.com/q/73090418/ asked by the user 'Idris' ( https://stackoverflow.com/u/12073762/ ) and on the answer https://stackoverflow.com/a/73090589/ provided by the user 'cc_man' ( https://stackoverflow.com/u/18606491/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Conversion to Firebase 9 from version 7 giving me FirebaseError: Expected type 'DocumentReference', but it was: a custom Query object

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Fixing FirebaseError When Upgrading from Firebase 7 to 9 in a React Chat App

Upgrading libraries in your project can often lead to unexpected errors, particularly when there are breaking changes between versions. If you're working on a React-based chat app and are migrating from Firebase version 7 to version 9, you may encounter a frustrating error: FirebaseError: Expected type 'DocumentReference', but it was: a custom Query object. In this guide, we’ll explore this issue in detail and provide a clear solution to help you seamlessly transition your code.

Understanding the Issue

The error you are encountering arises from changes in how Firebase v9 handles references and queries as compared to its predecessor. In version 7, you might have frequently used simple document references, while version 9 introduces a modular approach that requires more explicit structure around queries.

In your case, the main issue stems from how you are trying to access the messages subcollection for a particular chat. Instead of directly using collection references as with version 7, you now need to create references more methodically in version 9.

Step-by-Step Solution

Step 1: Update the Document Reference

To properly reference the specific chat document, you need to modify how you initialize the ref. Here’s the essential code snippet you need to start with:

[[See Video to Reveal this Text or Code Snippet]]

Using doc() here ensures that you correctly reference the document associated with the current chat being accessed.

Step 2: Create a Messages Subcollection Reference

Next, instead of referencing the subcollection directly like you might have in version 7, you should initialize the messagesRef in the following manner:

[[See Video to Reveal this Text or Code Snippet]]

Alternatively, you can also achieve this with the following syntax:

[[See Video to Reveal this Text or Code Snippet]]

This approach correctly sets up messagesRef as a reference to the messages subcollection of the document ref you created earlier.

Step 3: Execute a Query on the Messages

After confirming that you have valid references, you can execute your query using getDocs. Use the following code to arrange your messages based on the timestamp:

[[See Video to Reveal this Text or Code Snippet]]

This snippet ensures that you fetch the messages ordered by their timestamp in ascending order, thus preparing the data for rendering in your chat interface.

Complete Code Example

Here’s the complete section for the getServerSideProps function, integrating all our changes:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

Upgrading from Firebase version 7 to version 9 may initially seem daunting, especially when you encounter errors like FirebaseError: Expected type 'DocumentReference'. However, by adjusting your references and queries as shown above, you can overcome these obstacles and enjoy the benefits of Firebase's modular SDK.

Always refer back to the Firebase documentation for the most up-to-date practices and syntax. Happy coding with your upgraded chat app!