Dynamic binding useDocument

[mmikrut]

Reproduction

Was attempting to create form to edit Todos - tried pulling todo item into useDocument dynamically

<template>
  <h3>Update Todo:</h3>
  <p> <input type='text' placeholder="enter DocId" v-model='docId'  /> </p>
  <div v-if="updTodo">
      <input  type="text" v-model="updTodo.title" />
      <input  type="text" v-model="updTodo.note" />
      <button @click="updateTodo(docId,updTodo.title,updTodo.note)">Update</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { fbApp, fstore as db } from "/src/firebase"
import { useCollection, useDocument  } from 'vuefire'
import { collection, doc, addDoc, updateDoc } from 'firebase/firestore'

const docId = ref('')
const updTodo = useDocument(doc(db, 'todos', docId.value))

const updateTodo = async (docId,title,note) => {
  console.debug('Todos.vue updTodo(docId,title,note)', docId,title,note )
  try {
    const refupdTodo = doc(db,"todos",docId)
    await updateDoc(refupdTodo, {
      title: title,
      note: note,
    })
    console.debug('Todos.vue updTodo() - document updated docID:', docId)
  } catch(e) {
    console.error('Todos.vue updTodo() - error - document NOT updated',e ) 
  }
}
</script>

Steps to reproduce the behavior

try above code

Expected behavior

Expected updTodo to get updated & to be ale to update todo elements after entering document id in docId

Actual behavior

1. Got error below if docId is empty eg docId = ref(''). Entering actual document id, eg: MQpAdZgVshnwDGLCkiCr in input field changes nothing.

Uncaught (in promise) FirebaseError: Invalid document reference. Document references must have an even number of segments, but todos has 1.

2. When pre-setting docId, eg: docId = ref('MQpAdZgVshnwDGLCkiCr') - the form displays and I can update the todo.
3. But updating docId on the form, I expected to pull new record, that does not happen.

Perhaps I do not understand how this element is to be used?

[posva]

an empty string cannot be used as the id of a document, it has to contain something. If you want to create a new document, you can use addDoc() (https://firebase.google.com/docs/firestore/manage-data/add-data), which will give you a document with an id.

Also, note that documents bound with VueFire have their id property set so it can be used when updating the document